DESIGN.md
유명 브랜드의 실제 디자인 시스템 명세서(DESIGN.md — 색·타이포·모서리·간격· 컴포넌트 스타일이 담긴 구조화 데이터)를 그대로 파싱해, 그 규칙을 따르는 UI를 코드로 구현해 카드마다 나란히 보여줍니다. 카드를 누르면 더 넓은 홈페이지 구성으로 크게 볼 수 있고, 명세 원문(.md)도 내려받을 수 있습니다. 출처: VoltAgent/awesome-design-md (MIT License)
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff9100; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff9100; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c4b09; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff9100; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff9100; color: #111111;
border: 1px solid #d97d03; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c4b09; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e48a27; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff9100; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d97d03;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c4b09; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c4b09; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff9100; color:#000000;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#e48a27; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d97d03; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c4b09; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d97d03; padding: 18px 40px; color:#7c4b09;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">104 Job Bank</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© 104 Job Bank</span>
<span>104 Job Bank · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff0038; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff0038; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fa87a0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff0038; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff0038; color: #f5f5f5;
border: 1px solid #fd2756; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fa87a0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff2958; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff0038; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd2756;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#fa87a0; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#fa87a0; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff0038; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ff2958; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd2756; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#fa87a0; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd2756; padding: 18px 40px; color:#fa87a0;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">11st</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© 11st</span>
<span>11st · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4f6e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4f6e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faaab8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e8455f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4f6e; color: #000000;
border: 1px solid #e8455f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4f6e; color: #f5f5f5;
border: 1px solid #fd6a84; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faaab8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fb4d6c; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff4f6e; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd6a84;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#faaab8; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#faaab8; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e8455f; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff4f6e; color:#000000;
border:1px solid #e8455f; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fb4d6c; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd6a84; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#faaab8; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd6a84; padding: 18px 40px; color:#faaab8;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">17LIVE</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© 17LIVE</span>
<span>17LIVE · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e1027; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#5865f2;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0e1027; color:#5865f2;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">29CM</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© 29CM</span>
<span>29CM · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0c64e6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0c64e6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8cb4ee; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fbbd41; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0c64e6; color: #fbbd41;
border: 1px solid #fbbd41; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0c64e6; color: #f5f5f5;
border: 1px solid #317be8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8cb4ee; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3272cc; color: #fbbd41;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0c64e6; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #317be8;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8cb4ee; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8cb4ee; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fbbd41; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0c64e6; color:#fbbd41;
border:1px solid #fbbd41; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#3272cc; color:#fbbd41;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #317be8; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8cb4ee; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #317be8; padding: 18px 40px; color:#8cb4ee;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">3o3</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© 3o3</span>
<span>3o3 · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #786efa; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #786efa; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #bdb8f7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #32353f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #786efa; color: #32353f;
border: 1px solid #32353f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #786efa; color: #f5f5f5;
border: 1px solid #8c84f9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bdb8f7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #6d65dc; color: #32353f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#786efa; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #8c84f9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#bdb8f7; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#bdb8f7; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#32353f; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#786efa; color:#32353f;
border:1px solid #32353f; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#6d65dc; color:#32353f;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #8c84f9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#bdb8f7; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #8c84f9; padding: 18px 40px; color:#bdb8f7;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">42dot</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© 42dot</span>
<span>42dot · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff8000; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff8000; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c4309; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff8000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff8000; color: #111111;
border: 1px solid #d96e03; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c4309; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff9429; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff8000; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d96e03;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c4309; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c4309; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff8000; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ff9429; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d96e03; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c4309; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d96e03; padding: 18px 40px; color:#7c4309;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">591</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© 591</span>
<span>591 · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3282f0; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3282f0; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9dc1f3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #6741d9; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3282f0; color: #000000;
border: 1px solid #6741d9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3282f0; color: #f5f5f5;
border: 1px solid #5194f1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9dc1f3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3a78ec; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#3282f0; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #5194f1;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#9dc1f3; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#9dc1f3; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#6741d9; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3282f0; color:#000000;
border:1px solid #6741d9; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#3a78ec; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #5194f1; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#9dc1f3; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #5194f1; padding: 18px 40px; color:#9dc1f3;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">8percent</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© 8percent</span>
<span>8percent · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #061c3d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #061c3d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8993a2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e85040; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #061c3d; color: #e85040;
border: 1px solid #e85040; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #061c3d; color: #f5f5f5;
border: 1px solid #2c3f5a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8993a2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2a243d; color: #e85040;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#061c3d; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2c3f5a;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8993a2; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8993a2; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e85040; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#061c3d; color:#e85040;
border:1px solid #e85040; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2a243d; color:#e85040;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2c3f5a; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8993a2; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2c3f5a; padding: 18px 40px; color:#8993a2;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">91APP</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© 91APP</span>
<span>91APP · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ddaa00; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ddaa00; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #6d5609; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f0163a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ddaa00; color: #000000;
border: 1px solid #f0163a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ddaa00; color: #111111;
border: 1px solid #bc9203; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d5609; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e09209; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ddaa00; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #bc9203;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#6d5609; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#6d5609; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f0163a; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ddaa00; color:#000000;
border:1px solid #f0163a; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#e09209; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #bc9203; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#6d5609; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #bc9203; padding: 18px 40px; color:#6d5609;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">ABEMA</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© ABEMA</span>
<span>ABEMA · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2d2d2d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2d2d2d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9b9b9b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #018849; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2d2d2d; color: #018849;
border: 1px solid #018849; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2d2d2d; color: #f5f5f5;
border: 1px solid #4d4d4d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9b9b9b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #263c31; color: #018849;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#2d2d2d; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #4d4d4d;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#9b9b9b; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#9b9b9b; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#018849; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2d2d2d; color:#018849;
border:1px solid #018849; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#263c31; color:#018849;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #4d4d4d; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#9b9b9b; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #4d4d4d; padding: 18px 40px; color:#9b9b9b;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">ASOS</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© ASOS</span>
<span>ASOS · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #295eff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #295eff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #99b1fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #295eff; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #295eff; color: #f5f5f5;
border: 1px solid #4a76fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #99b1fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4b78ff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#295eff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #4a76fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#99b1fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#99b1fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#295eff; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#4b78ff; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #4a76fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#99b1fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #4a76fd; padding: 18px 40px; color:#99b1fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">AWS Cloudscape</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© AWS Cloudscape</span>
<span>AWS Cloudscape · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5160; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5160; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faabb2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5160; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5160; color: #f5f5f5;
border: 1px solid #fd6b78; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faabb2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e45477; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff5160; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd6b78;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#faabb2; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#faabb2; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff5160; color:#000000;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#e45477; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd6b78; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#faabb2; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd6b78; padding: 18px 40px; color:#faabb2;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Ably</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Ably</span>
<span>Ably · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00aaf5; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00aaf5; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d3f5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0088d2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00aaf5; color: #000000;
border: 1px solid #0088d2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00aaf5; color: #000000;
border: 1px solid #27b6f5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d3f5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00a5ef; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00aaf5; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27b6f5;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87d3f5; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87d3f5; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0088d2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00aaf5; color:#000000;
border:1px solid #0088d2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#00a5ef; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27b6f5; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87d3f5; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27b6f5; padding: 18px 40px; color:#87d3f5;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Accupass</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Accupass</span>
<span>Accupass · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #80c343; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #80c343; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #436128; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #40810c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #80c343; color: #000000;
border: 1px solid #40810c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #80c343; color: #111111;
border: 1px solid #6ea73b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #436128; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #76b83a; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#80c343; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #6ea73b;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#436128; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#436128; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#40810c; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#80c343; color:#000000;
border:1px solid #40810c; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#76b83a; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #6ea73b; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#436128; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #6ea73b; padding: 18px 40px; color:#436128;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Acer</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Acer</span>
<span>Acer · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5a2b82; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5a2b82; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #af9ac1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #6fbf4e; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5a2b82; color: #6fbf4e;
border: 1px solid #6fbf4e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5a2b82; color: #f5f5f5;
border: 1px solid #734b94; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #af9ac1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5d437a; color: #6fbf4e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#5a2b82; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #734b94;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#af9ac1; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#af9ac1; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#6fbf4e; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5a2b82; color:#6fbf4e;
border:1px solid #6fbf4e; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#5d437a; color:#6fbf4e;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #734b94; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#af9ac1; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #734b94; padding: 18px 40px; color:#af9ac1;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Acorns (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Acorns (iOS)</span>
<span>Acorns (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eb1000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eb1000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f08e87; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3b63fb; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #eb1000; color: #000000;
border: 1px solid #3b63fb; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #eb1000; color: #f5f5f5;
border: 1px solid #ed3527; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f08e87; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cf1d28; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#eb1000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #ed3527;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f08e87; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f08e87; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3b63fb; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#eb1000; color:#000000;
border:1px solid #3b63fb; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#cf1d28; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #ed3527; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f08e87; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #ed3527; padding: 18px 40px; color:#f08e87;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Adobe</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Adobe</span>
<span>Adobe · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff385c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff385c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faa0b0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff385c; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff385c; color: #f5f5f5;
border: 1px solid #fd5674; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faa0b0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e43f74; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff385c; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd5674;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#faa0b0; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#faa0b0; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff385c; color:#000000;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#e43f74; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd5674; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#faa0b0; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd5674; padding: 18px 40px; color:#faa0b0;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Airbnb</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Airbnb</span>
<span>Airbnb · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.18; letter-spacing: -0.44px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #ff385c; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #ffffff; color: #222222;
border: 1px solid #ff385c; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; background: #ffffff; color: #222222;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #e0e0e0;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.18; letter-spacing: -0.44px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; display:flex; gap:28px; color:#6a6a6a; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 28px; font-weight: 700; line-height: 1.43; margin:0; max-width:640px; color:#222222; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin:0; max-width:520px; color:#6a6a6a; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background:#ff385c; color:#ffffff;
border:none; border-radius:8px; padding:14px 24px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background:#ffffff; color:#222222;
border:1px solid #ff385c; border-radius:8px;
padding:13px 23px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; background:#ffffff; color:#222222;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #e0e0e0; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.18; letter-spacing: -0.44px; font-size: 16px; margin:0; color:#222222; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin:0; color:#6a6a6a; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; border-top:1px solid #e0e0e0; padding: 18px 40px; color:#6a6a6a;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Airbnb</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Airbnb</span>
<span>Airbnb · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff385c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff385c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faa0b0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5a5f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff385c; color: #000000;
border: 1px solid #ff5a5f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff385c; color: #f5f5f5;
border: 1px solid #fd5674; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faa0b0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff3d5c; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff385c; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd5674;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#faa0b0; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#faa0b0; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff5a5f; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff385c; color:#000000;
border:1px solid #ff5a5f; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ff3d5c; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd5674; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#faa0b0; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd5674; padding: 18px 40px; color:#faa0b0;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Airbnb (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Airbnb (iOS)</span>
<span>Airbnb (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #155dfc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #155dfc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #90b1f8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0970ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #155dfc; color: #ffffff;
border: 1px solid #0970ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #155dfc; color: #f5f5f5;
border: 1px solid #3975fb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #90b1f8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1360fc; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#155dfc; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3975fb;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#90b1f8; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#90b1f8; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0970ff; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#155dfc; color:#ffffff;
border:1px solid #0970ff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#1360fc; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3975fb; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#90b1f8; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3975fb; padding: 18px 40px; color:#90b1f8;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Airbridge</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Airbridge</span>
<span>Airbridge · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #181d26;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #181d26;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.35; letter-spacing: 0.12px; margin: 0; color: #181d26; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.25; margin: 0; color: #41454d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; background: #181d26; color: #ffffff;
border: none; border-radius: 12px; padding: 16px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; background: #ffffff; color: #181d26;
border: 1px solid #181d26; border-radius: 12px;
padding: 16px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.25; background: #ffffff; color: #181d26;
border: 1px solid #c5c6c9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #41454d; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dfdfe1; color: #181d26;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#181d26; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dfdfe1;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.35; letter-spacing: 0.12px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.25; display:flex; gap:28px; color:#41454d; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 40px; font-weight: 400; line-height: 1.2; margin:0; max-width:640px; color:#181d26; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.25; margin:0; max-width:520px; color:#41454d; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; background:#181d26; color:#ffffff;
border:none; border-radius:12px; padding:16px 24px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; background:#ffffff; color:#181d26;
border:1px solid #181d26; border-radius:12px;
padding:16px 24px; white-space:nowrap; cursor:default;
}
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background:#dfdfe1; color:#181d26;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dfdfe1; border-radius: 12px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.35; letter-spacing: 0.12px; font-size: 16px; margin:0; color:#181d26; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.25; margin:0; color:#41454d; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.25; border-top:1px solid #dfdfe1; padding: 18px 40px; color:#41454d;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Airtable</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Airtable</span>
<span>Airtable · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcb400; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcb400; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7b5a09; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1b61c9; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fcb400; color: #1b61c9;
border: 1px solid #1b61c9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fcb400; color: #111111;
border: 1px solid #d69a03; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b5a09; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d8a720; color: #1b61c9;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fcb400; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d69a03;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7b5a09; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7b5a09; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1b61c9; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fcb400; color:#1b61c9;
border:1px solid #1b61c9; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d8a720; color:#1b61c9;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d69a03; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7b5a09; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d69a03; padding: 18px 40px; color:#7b5a09;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Airtable</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Airtable</span>
<span>Airtable · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1890ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1890ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #92c8fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f5f5f5; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1890ff; color: #f5f5f5;
border: 1px solid #f5f5f5; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1890ff; color: #f5f5f5;
border: 1px solid #3ba0fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #92c8fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3ba0fd; color: #f5f5f5;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1890ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3ba0fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#92c8fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#92c8fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f5f5f5; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1890ff; color:#f5f5f5;
border:1px solid #f5f5f5; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#3ba0fd; color:#f5f5f5;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3ba0fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#92c8fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3ba0fd; padding: 18px 40px; color:#92c8fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Alipay</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Alipay</span>
<span>Alipay · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2f4f1; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f2f4f1; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfdfd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f2f4f1; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#000000;
border:1px solid #f2f4f1; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fdfdfd; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">AllTrails (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© AllTrails (iOS)</span>
<span>AllTrails (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #02cab9; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #02cab9; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #0a645d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5f5f; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #02cab9; color: #000000;
border: 1px solid #ff5f5f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #02cab9; color: #111111;
border: 1px solid #04ac9e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #0a645d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2ab9ab; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#02cab9; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #04ac9e;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#0a645d; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#0a645d; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff5f5f; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#02cab9; color:#000000;
border:1px solid #ff5f5f; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2ab9ab; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #04ac9e; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#0a645d; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #04ac9e; padding: 18px 40px; color:#0a645d;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">AmazingTalker</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© AmazingTalker</span>
<span>AmazingTalker · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff9900; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff9900; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c4e09; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #131921; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff9900; color: #131921;
border: 1px solid #131921; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff9900; color: #111111;
border: 1px solid #d98303; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c4e09; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d98505; color: #131921;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff9900; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d98303;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c4e09; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c4e09; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#131921; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff9900; color:#131921;
border:1px solid #131921; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d98505; color:#131921;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d98303; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c4e09; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d98303; padding: 18px 40px; color:#7c4e09;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Amazon (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Amazon (iOS)</span>
<span>Amazon (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0c1b22; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0c1b22; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8c9396; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0c1b22; color: #ffffff;
border: 1px solid #121212; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0c1b22; color: #f5f5f5;
border: 1px solid #313e44; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c9396; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0d1a1f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0c1b22; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #313e44;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8c9396; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8c9396; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#121212; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0c1b22; color:#ffffff;
border:1px solid #121212; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0d1a1f; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #313e44; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8c9396; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #313e44; padding: 18px 40px; color:#8c9396;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Amazon Music (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Amazon Music (iOS)</span>
<span>Amazon Music (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1d2eff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1d2eff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #949bfa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1626d9; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1d2eff; color: #ffffff;
border: 1px solid #1626d9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1d2eff; color: #f5f5f5;
border: 1px solid #404efd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949bfa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1c2df9; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1d2eff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #404efd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#949bfa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#949bfa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1626d9; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1d2eff; color:#ffffff;
border:1px solid #1626d9; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#1c2df9; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #404efd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#949bfa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #404efd; padding: 18px 40px; color:#949bfa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Appier</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Appier</span>
<span>Appier · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e1027; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#5865f2;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0e1027; color:#5865f2;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Apple</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Apple</span>
<span>Apple · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d1d1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d1d1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 21px; font-weight: 600; line-height: 1.19; letter-spacing: 0.231px; margin: 0; color: #1d1d1f; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.0; letter-spacing: -0.12px; margin: 0; color: #cccccc; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.47; letter-spacing: -0.374px; background: #0066cc; color: #ffffff;
border: none; border-radius: 9999px; padding: 11px 22px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.47; letter-spacing: -0.374px; background: #ffffff; color: #0066cc;
border: 1px solid #0066cc; border-radius: 9999px;
padding: 11px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.47; letter-spacing: -0.374px; background: #ffffff; color: #1d1d1f;
border: 1px solid #c6c6c7; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #cccccc; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.43; letter-spacing: -0.224px; background: #ffffff; color: #1d1d1f;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1d1d1f; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dfdfe0;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 21px; font-weight: 600; line-height: 1.19; letter-spacing: 0.231px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.0; letter-spacing: -0.12px; display:flex; gap:28px; color:#cccccc; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 40px; font-weight: 600; line-height: 1.1; margin:0; max-width:640px; color:#1d1d1f; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.0; letter-spacing: -0.12px; margin:0; max-width:520px; color:#cccccc; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.47; letter-spacing: -0.374px; background:#0066cc; color:#ffffff;
border:none; border-radius:9999px; padding:11px 22px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.47; letter-spacing: -0.374px; background:#ffffff; color:#0066cc;
border:1px solid #0066cc; border-radius:9999px;
padding:11px 22px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.43; letter-spacing: -0.224px; background:#ffffff; color:#1d1d1f;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dfdfe0; border-radius: 12px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 21px; font-weight: 600; line-height: 1.19; letter-spacing: 0.231px; font-size: 16px; margin:0; color:#1d1d1f; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.0; letter-spacing: -0.12px; margin:0; color:#cccccc; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.0; letter-spacing: -0.12px; border-top:1px solid #dfdfe0; padding: 18px 40px; color:#cccccc;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Apple</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Apple</span>
<span>Apple · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fa114f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fa114f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f78eaa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #92e82a; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fa114f; color: #92e82a;
border: 1px solid #92e82a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fa114f; color: #f5f5f5;
border: 1px solid #f9356a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f78eaa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e93349; color: #92e82a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fa114f; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #f9356a;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f78eaa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f78eaa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#92e82a; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fa114f; color:#92e82a;
border:1px solid #92e82a; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#e93349; color:#92e82a;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #f9356a; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f78eaa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #f9356a; padding: 18px 40px; color:#f78eaa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Apple Fitness (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Apple Fitness (iOS)</span>
<span>Apple Fitness (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f1e6; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f1e6; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #787671; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #b9d9eb; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f6f1e6; color: #000000;
border: 1px solid #b9d9eb; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f6f1e6; color: #111111;
border: 1px solid #d1cdc4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #787671; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ecede7; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f6f1e6; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d1cdc4;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#787671; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#787671; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#b9d9eb; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f6f1e6; color:#000000;
border:1px solid #b9d9eb; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ecede7; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d1cdc4; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#787671; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d1cdc4; padding: 18px 40px; color:#787671;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Apple Maps (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Apple Maps (iOS)</span>
<span>Apple Maps (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6d6d6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#000000;
border:1px solid #000000; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d6d6d6; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Apple Music (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Apple Music (iOS)</span>
<span>Apple Music (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffbed; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffbed; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7a74; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fffbed; color: #1a1a1a;
border: 1px solid #1a1a1a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fffbed; color: #111111;
border: 1px solid #d9d6ca; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7a74; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dad7cb; color: #1a1a1a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fffbed; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d6ca;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7a74; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7a74; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1a1a1a; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fffbed; color:#1a1a1a;
border:1px solid #1a1a1a; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#dad7cb; color:#1a1a1a;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d6ca; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7a74; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d6ca; padding: 18px 40px; color:#7c7a74;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Apple Notes (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Apple Notes (iOS)</span>
<span>Apple Notes (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #38383a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #38383a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #090909; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#38383a; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #38383a; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#090909; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Apple TV (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Apple TV (iOS)</span>
<span>Apple TV (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #262629; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #262629; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #060607; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#262629; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #262629; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#060607; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Apple Wallet (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Apple Wallet (iOS)</span>
<span>Apple Wallet (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f06a6a; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f06a6a; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #753939; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fd3ffd; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f06a6a; color: #000000;
border: 1px solid #fd3ffd; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f06a6a; color: #111111;
border: 1px solid #cc5c5c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #753939; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f26382; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f06a6a; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #cc5c5c;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#753939; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#753939; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fd3ffd; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f06a6a; color:#000000;
border:1px solid #fd3ffd; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#f26382; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #cc5c5c; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#753939; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #cc5c5c; padding: 18px 40px; color:#753939;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Asana</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Asana</span>
<span>Asana · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1e1f21; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #1e1f21;
border: 1px solid #1e1f21; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dbdbdb; color: #1e1f21;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1e1f21; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#1e1f21;
border:1px solid #1e1f21; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#dbdbdb; color:#1e1f21;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Asana (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Asana (iOS)</span>
<span>Asana (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2a75fc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2a75fc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9abbf8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2a75fc; color: #121212;
border: 1px solid #121212; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2a75fc; color: #f5f5f5;
border: 1px solid #4a89fb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9abbf8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2665d7; color: #121212;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#2a75fc; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #4a89fb;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#9abbf8; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#9abbf8; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#121212; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2a75fc; color:#121212;
border:1px solid #121212; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2665d7; color:#121212;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #4a89fb; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#9abbf8; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #4a89fb; padding: 18px 40px; color:#9abbf8;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Asleep</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Asleep</span>
<span>Asleep · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a1a1a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a1a1a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #929292; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2a2a2a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ffffff;
border: 1px solid #2a2a2a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a1a1a; color: #f5f5f5;
border: 1px solid #3d3d3d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #929292; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1d1d1d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1a1a1a; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3d3d3d;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#929292; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#929292; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2a2a2a; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1a1a1a; color:#ffffff;
border:1px solid #2a2a2a; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#1d1d1d; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3d3d3d; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#929292; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3d3d3d; padding: 18px 40px; color:#929292;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Audible (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Audible (iOS)</span>
<span>Audible (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #bb1919; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #bb1919;
border: 1px solid #bb1919; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1e0404; color: #bb1919;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#bb1919; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#bb1919;
border:1px solid #bb1919; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#1e0404; color:#bb1919;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">BBC</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© BBC</span>
<span>BBC · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1c69d4; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1c69d4; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #93b6e6; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #414141; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1c69d4; color: #ffffff;
border: 1px solid #414141; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1c69d4; color: #f5f5f5;
border: 1px solid #3f7fd9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #93b6e6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2263bc; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1c69d4; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3f7fd9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#93b6e6; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#93b6e6; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#414141; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1c69d4; color:#ffffff;
border:1px solid #414141; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2263bc; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3f7fd9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#93b6e6; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3f7fd9; padding: 18px 40px; color:#93b6e6;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">BMW</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© BMW</span>
<span>BMW · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #262626;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #262626;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #262626; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.55; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.0; letter-spacing: 0.5px; background: #1c69d4; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.0; letter-spacing: 0.5px; background: #ffffff; color: #262626;
border: 1px solid #1c69d4; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.55; background: #ffffff; color: #262626;
border: 1px solid #c9c9c9; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.5px; background: #ffffff; color: #262626;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#262626; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #e1e1e1;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.55; display:flex; gap:28px; color:#6b6b6b; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 700; line-height: 1.1; margin:0; max-width:640px; color:#262626; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.55; margin:0; max-width:520px; color:#6b6b6b; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.0; letter-spacing: 0.5px; background:#1c69d4; color:#ffffff;
border:none; border-radius:0px; padding:14px 32px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.0; letter-spacing: 0.5px; background:#ffffff; color:#262626;
border:1px solid #1c69d4; border-radius:0px;
padding:13px 31px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.5px; background:#ffffff; color:#262626;
border-radius:0px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #e1e1e1; border-radius: 0px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; font-size: 16px; margin:0; color:#262626; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.55; margin:0; color:#6b6b6b; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.55; border-top:1px solid #e1e1e1; padding: 18px 40px; color:#6b6b6b;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">BMW</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© BMW</span>
<span>BMW · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.5; margin: 0; color: #7e7e7e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 1.5px; background: #000000; color: #ffffff;
border: none; border-radius: 0px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 1.5px; background: transparent; color: #ffffff;
border: 1px solid #ffffff; border-radius: 0px;
padding: 16px 32px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.5; background: #1a1a1a; color: #ffffff;
border: 1px solid #404040; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7e7e7e; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #242424; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #242424;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.5; display:flex; gap:28px; color:#7e7e7e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 40px; font-weight: 700; line-height: 1.1; margin:0; max-width:640px; color:#ffffff; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.5; margin:0; max-width:520px; color:#7e7e7e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 1.5px; background:#000000; color:#ffffff;
border:none; border-radius:0px; padding:16px 32px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 1.5px; background:transparent; color:#ffffff;
border:1px solid #ffffff; border-radius:0px;
padding:16px 32px; white-space:nowrap; cursor:default;
}
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background:#242424; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #242424; border-radius: 0px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; font-size: 16px; margin:0; color:#ffffff; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.5; margin:0; color:#7e7e7e; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.5; border-top:1px solid #242424; padding: 18px 40px; color:#7e7e7e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">BMW M</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© BMW M</span>
<span>BMW M · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0cefd3; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0cefd3; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #0f7568; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0cefd3; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0cefd3; color: #111111;
border: 1px solid #0dcbb4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #0f7568; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #18d9d8; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0cefd3; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #0dcbb4;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#0f7568; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#0f7568; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0cefd3; color:#5865f2;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#18d9d8; color:#5865f2;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #0dcbb4; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#0f7568; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #0dcbb4; padding: 18px 40px; color:#0f7568;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Baemin</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Baemin</span>
<span>Baemin · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #11aac1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #11aac1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8ed3de; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #117e96; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #11aac1; color: #000000;
border: 1px solid #117e96; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #11aac1; color: #f5f5f5;
border: 1px solid #35b6c9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8ed3de; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #11a3ba; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#11aac1; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #35b6c9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8ed3de; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8ed3de; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#117e96; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#11aac1; color:#000000;
border:1px solid #117e96; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#11a3ba; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #35b6c9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8ed3de; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #35b6c9; padding: 18px 40px; color:#8ed3de;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Bahamut</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Bahamut</span>
<span>Bahamut · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f4f4f4; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f4f4f4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfdfd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f4f4f4; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#000000;
border:1px solid #f4f4f4; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fdfdfd; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Bandcamp (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Bandcamp (iOS)</span>
<span>Bandcamp (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #13bd7e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #13bd7e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8fdcbf; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #13bd7e; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #13bd7e; color: #000000;
border: 1px solid #37c691; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8fdcbf; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1eaf91; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#13bd7e; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #37c691;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8fdcbf; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8fdcbf; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#13bd7e; color:#000000;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#1eaf91; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #37c691; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8fdcbf; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #37c691; padding: 18px 40px; color:#8fdcbf;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Banksalad</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Banksalad</span>
<span>Banksalad · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fa5014; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fa5014; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f7ab90; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fa5014; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fa5014; color: #f5f5f5;
border: 1px solid #f96a38; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f7ab90; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d24311; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fa5014; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #f96a38;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f7ab90; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f7ab90; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fa5014; color:#000000;
border:1px solid #000000; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d24311; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #f96a38; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f7ab90; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #f96a38; padding: 18px 40px; color:#f7ab90;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Barogo</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Barogo</span>
<span>Barogo · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1c1c1e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #1c1c1e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #040405; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1c1c1e; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #1c1c1e; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#040405; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">BeReal (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© BeReal (iOS)</span>
<span>BeReal (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #21252b; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #21252b;
border: 1px solid #21252b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dbdcdd; color: #21252b;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#21252b; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#21252b;
border:1px solid #21252b; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#dbdcdd; color:#21252b;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Bear (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Bear (iOS)</span>
<span>Bear (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ec0047; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ec0047; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f187a7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff1553; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ec0047; color: #000000;
border: 1px solid #ff1553; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ec0047; color: #f5f5f5;
border: 1px solid #ed2763; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f187a7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ef0349; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ec0047; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #ed2763;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f187a7; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f187a7; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff1553; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ec0047; color:#000000;
border:1px solid #ff1553; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ef0349; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #ed2763; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f187a7; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #ed2763; padding: 18px 40px; color:#f187a7;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Beusable</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Beusable</span>
<span>Beusable · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #006fff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #006fff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b9fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0066cc; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #006fff; color: #000000;
border: 1px solid #0066cc; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #006fff; color: #f5f5f5;
border: 1px solid #2784fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b9fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #006ef7; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#006fff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2784fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87b9fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87b9fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0066cc; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#006fff; color:#000000;
border:1px solid #0066cc; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#006ef7; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2784fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87b9fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2784fd; padding: 18px 40px; color:#87b9fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Bigin</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Bigin</span>
<span>Bigin · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fb7299; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fb7299; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7a3d4e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f1f2f3; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fb7299; color: #000000;
border: 1px solid #f1f2f3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fb7299; color: #111111;
border: 1px solid #d66283; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a3d4e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f986a7; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fb7299; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d66283;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7a3d4e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7a3d4e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f1f2f3; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fb7299; color:#000000;
border:1px solid #f1f2f3; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#f986a7; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d66283; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7a3d4e; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d66283; padding: 18px 40px; color:#7a3d4e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Bilibili</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Bilibili</span>
<span>Bilibili · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcd535; color: #181a20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcd535; color: #181a20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #181a20; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #707a8a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background: #fcd535; color: #181a20;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background: #1e2329; color: #ffffff;
border: 1px solid #fcd535; border-radius: 6px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #1e2329; color: #ffffff;
border: 1px solid #c3a630; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707a8a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; background: #1e2329; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fcd535; color:#181a20; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dcbb32;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; display:flex; gap:28px; color:#707a8a; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 40px; font-weight: 600; line-height: 1.15; letter-spacing: -0.3px; margin:0; max-width:640px; color:#181a20; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin:0; max-width:520px; color:#707a8a; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background:#fcd535; color:#181a20;
border:none; border-radius:6px; padding:12px 24px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background:#1e2329; color:#ffffff;
border:1px solid #fcd535; border-radius:6px;
padding:12px 24px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; background:#1e2329; color:#ffffff;
border-radius:8px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dcbb32; border-radius: 6px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; font-size: 16px; margin:0; color:#181a20; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin:0; color:#707a8a; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; border-top:1px solid #dcbb32; padding: 18px 40px; color:#707a8a;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Binance</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Binance</span>
<span>Binance · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0b0e11; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0b0e11; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8c8d8e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2b3139; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b0e11; color: #ffffff;
border: 1px solid #2b3139; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0b0e11; color: #f5f5f5;
border: 1px solid #303335; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8d8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #101417; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0b0e11; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #303335;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8c8d8e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8c8d8e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2b3139; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0b0e11; color:#ffffff;
border:1px solid #2b3139; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#101417; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #303335; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8c8d8e; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #303335; padding: 18px 40px; color:#8c8d8e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Binance (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Binance (iOS)</span>
<span>Binance (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1c2028; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1c2028; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #939599; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #543e35; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1c2028; color: #ffffff;
border: 1px solid #543e35; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1c2028; color: #f5f5f5;
border: 1px solid #3f4249; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #939599; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #25252a; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1c2028; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3f4249;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#939599; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#939599; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#543e35; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1c2028; color:#ffffff;
border:1px solid #543e35; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#25252a; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3f4249; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#939599; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3f4249; padding: 18px 40px; color:#939599;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Bithumb</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Bithumb</span>
<span>Bithumb · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f92c16; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f92c16; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f79b91; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f92c16; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f92c16; color: #f5f5f5;
border: 1px solid #f84c3a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f79b91; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d12512; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f92c16; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #f84c3a;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f79b91; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f79b91; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f92c16; color:#000000;
border:1px solid #000000; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d12512; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #f84c3a; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f79b91; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #f84c3a; padding: 18px 40px; color:#f79b91;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Bito</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Bito</span>
<span>Bito · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #da3238; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #da3238; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e99da0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fb5957; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #da3238; color: #ffffff;
border: 1px solid #fb5957; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #da3238; color: #f5f5f5;
border: 1px solid #de5156; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e99da0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #df383d; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#da3238; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #de5156;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#e99da0; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#e99da0; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fb5957; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#da3238; color:#ffffff;
border:1px solid #fb5957; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#df383d; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #de5156; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#e99da0; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #de5156; padding: 18px 40px; color:#e99da0;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Blind</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Blind</span>
<span>Blind · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b0f14; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #0b0f14;
border: 1px solid #0b0f14; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d8d9d9; color: #0b0f14;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0b0f14; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#0b0f14;
border:1px solid #0b0f14; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d8d9d9; color:#0b0f14;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Bluesky (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Bluesky (iOS)</span>
<span>Bluesky (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2f2f2; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f2f2f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfdfd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f2f2f2; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#000000;
border:1px solid #f2f2f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fdfdfd; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Booking.com (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Booking.com (iOS)</span>
<span>Booking.com (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1e1e1e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1e1e1e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #949494; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1e1e1e; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1e1e1e; color: #f5f5f5;
border: 1px solid #404040; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949494; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #424242; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1e1e1e; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #404040;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#949494; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#949494; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1e1e1e; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#424242; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #404040; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#949494; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #404040; padding: 18px 40px; color:#949494;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Brandi</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Brandi</span>
<span>Brandi · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; letter-spacing: 1.5px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 3.0px; margin: 0; color: #999999; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 2.5px; background: transparent; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 9999px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: transparent; color: #ffffff;
border: 1px solid #404040; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #999999; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 2px; background: transparent; color: #999999;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #242424;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; letter-spacing: 1.5px; font-size: 18px; margin:0; }
.navlinks { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 3.0px; display:flex; gap:28px; color:#999999; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 400; line-height: 1.15; letter-spacing: 3px; margin:0; max-width:640px; color:#ffffff; }
.hero p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 3.0px; margin:0; max-width:520px; color:#999999; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 2.5px; background:transparent; color:#ffffff;
border:none; border-radius:9999px; padding:14px 32px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background:#000000; color:#ffffff;
border:1px solid #ffffff; border-radius:9999px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 2px; background:transparent; color:#999999;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #242424; border-radius: 12px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; letter-spacing: 1.5px; font-size: 16px; margin:0; color:#ffffff; }
.feature-card p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 3.0px; margin:0; color:#999999; }
footer {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 3.0px; border-top:1px solid #242424; padding: 18px 40px; color:#999999;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Bugatti</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Bugatti</span>
<span>Bugatti · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffc629; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffc629; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c621c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f5b616; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffc629; color: #000000;
border: 1px solid #f5b616; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffc629; color: #111111;
border: 1px solid #d9a925; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c621c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdc326; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffc629; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9a925;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c621c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c621c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f5b616; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffc629; color:#000000;
border:1px solid #f5b616; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fdc326; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9a925; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c621c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9a925; padding: 18px 40px; color:#7c621c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Bumble (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Bumble (iOS)</span>
<span>Bumble (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #d80c18; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #d80c18; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e88c92; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c00b15; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d80c18; color: #ffffff;
border: 1px solid #c00b15; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #d80c18; color: #f5f5f5;
border: 1px solid #dd313b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e88c92; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d40c18; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#d80c18; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dd313b;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#e88c92; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#e88c92; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#c00b15; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#d80c18; color:#ffffff;
border:1px solid #c00b15; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d40c18; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dd313b; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#e88c92; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #dd313b; padding: 18px 40px; color:#e88c92;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Bunjang</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Bunjang</span>
<span>Bunjang · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f44336; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f44336; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f5a59f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e171f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f44336; color: #0e171f;
border: 1px solid #0e171f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f44336; color: #f5f5f5;
border: 1px solid #f45f55; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f5a59f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cf3c32; color: #0e171f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f44336; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #f45f55;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f5a59f; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f5a59f; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0e171f; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f44336; color:#0e171f;
border:1px solid #0e171f; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#cf3c32; color:#0e171f;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #f45f55; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f5a59f; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #f45f55; padding: 18px 40px; color:#f5a59f;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Buzzvil</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Buzzvil</span>
<span>Buzzvil · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8f8f8f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #121212; color: #f5f5f5;
border: 1px solid #363636; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8f8f8f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #383838; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #363636;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8f8f8f; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8f8f8f; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#121212; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#383838; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #363636; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8f8f8f; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #363636; padding: 18px 40px; color:#8f8f8f;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">CGV</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© CGV</span>
<span>CGV · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #640faf; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #640faf; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b48ed6; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ec0040; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #640faf; color: #ffffff;
border: 1px solid #ec0040; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #640faf; color: #f5f5f5;
border: 1px solid #7b34ba; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b48ed6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #7a0d9d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#640faf; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #7b34ba;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#b48ed6; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#b48ed6; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ec0040; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#640faf; color:#ffffff;
border:1px solid #ec0040; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#7a0d9d; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #7b34ba; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#b48ed6; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #7b34ba; padding: 18px 40px; color:#b48ed6;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">CJ ONSTYLE</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© CJ ONSTYLE</span>
<span>CJ ONSTYLE · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #084fff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #084fff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8aaafa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3971ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #084fff; color: #ffffff;
border: 1px solid #3971ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #084fff; color: #f5f5f5;
border: 1px solid #2e6afd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8aaafa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1054ff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#084fff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2e6afd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8aaafa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8aaafa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3971ff; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#084fff; color:#ffffff;
border:1px solid #3971ff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#1054ff; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2e6afd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8aaafa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2e6afd; padding: 18px 40px; color:#8aaafa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Cafe24</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Cafe24</span>
<span>Cafe24 · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #13ab67; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #13ab67; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8fd4b5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #13ab67; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #13ab67; color: #f5f5f5;
border: 1px solid #37b77e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8fd4b5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #39b87f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#13ab67; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #37b77e;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8fd4b5; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8fd4b5; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#13ab67; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#39b87f; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #37b77e; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8fd4b5; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #37b77e; padding: 18px 40px; color:#8fd4b5;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Cake</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Cake</span>
<span>Cake · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a0a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a0a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8b8b8b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #151515; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0a0a; color: #ffffff;
border: 1px solid #151515; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a0a0a; color: #f5f5f5;
border: 1px solid #303030; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8b8b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0c0c0c; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0a0a0a; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #303030;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8b8b8b; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8b8b8b; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#151515; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0a0a0a; color:#ffffff;
border:1px solid #151515; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0c0c0c; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #303030; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8b8b8b; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #303030; padding: 18px 40px; color:#8b8b8b;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Cal AI (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Cal AI (iOS)</span>
<span>Cal AI (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #111827; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #111827; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8e9298; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #242424; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #111827; color: #ffffff;
border: 1px solid #242424; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #111827; color: #f5f5f5;
border: 1px solid #353b48; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e9298; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #141a27; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#111827; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #353b48;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8e9298; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8e9298; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#242424; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#111827; color:#ffffff;
border:1px solid #242424; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#141a27; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #353b48; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8e9298; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #353b48; padding: 18px 40px; color:#8e9298;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Cal.com</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Cal.com</span>
<span>Cal.com · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background: #111111; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background: #ffffff; color: #111111;
border: 1px solid #111111; border-radius: 8px;
padding: 12px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; background: #f5f5f5; color: #111111;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dedede;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; display:flex; gap:28px; color:#6b7280; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 36px; font-weight: 600; line-height: 1.15; letter-spacing: -1px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin:0; max-width:520px; color:#6b7280; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background:#111111; color:#ffffff;
border:none; border-radius:8px; padding:12px 20px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background:#ffffff; color:#111111;
border:1px solid #111111; border-radius:8px;
padding:12px 20px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; background:#f5f5f5; color:#111111;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dedede; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin:0; color:#6b7280; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; border-top:1px solid #dedede; padding: 18px 40px; color:#6b7280;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Cal.com</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Cal.com</span>
<span>Cal.com · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2a6fd6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2a6fd6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9ab9e7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b1e3f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2a6fd6; color: #0b1e3f;
border: 1px solid #0b1e3f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2a6fd6; color: #f5f5f5;
border: 1px solid #4a84db; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9ab9e7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2562be; color: #0b1e3f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#2a6fd6; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #4a84db;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#9ab9e7; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#9ab9e7; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0b1e3f; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2a6fd6; color:#0b1e3f;
border:1px solid #0b1e3f; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2562be; color:#0b1e3f;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #4a84db; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#9ab9e7; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #4a84db; padding: 18px 40px; color:#9ab9e7;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Calm (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Calm (iOS)</span>
<span>Calm (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7f8fa; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f7f8fa; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fefefe; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f7f8fa; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#000000;
border:1px solid #f7f8fa; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fefefe; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Canva (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Canva (iOS)</span>
<span>Canva (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00e013; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00e013; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87ec8f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00e013; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00e013; color: #000000;
border: 1px solid #27e337; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87ec8f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00bc10; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00e013; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27e337;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87ec8f; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87ec8f; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00e013; color:#000000;
border:1px solid #000000; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#00bc10; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27e337; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87ec8f; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27e337; padding: 18px 40px; color:#87ec8f;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Cash App</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Cash App</span>
<span>Cash App · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00d632; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00d632; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87e79d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00d632; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00d632; color: #000000;
border: 1px solid #27db51; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87e79d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00b42a; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00d632; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27db51;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87e79d; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87e79d; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00d632; color:#000000;
border:1px solid #000000; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#00b42a; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27db51; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87e79d; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27db51; padding: 18px 40px; color:#87e79d;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Cash App (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Cash App (iOS)</span>
<span>Cash App (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff3d00; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff3d00; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faa287; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff3d00; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff3d00; color: #f5f5f5;
border: 1px solid #fd5a27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faa287; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e44327; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff3d00; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd5a27;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#faa287; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#faa287; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff3d00; color:#000000;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#e44327; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd5a27; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#faa287; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd5a27; padding: 18px 40px; color:#faa287;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">CatchTable</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© CatchTable</span>
<span>CatchTable · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00512a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00512a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87ab9a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #26a862; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00512a; color: #26a862;
border: 1px solid #26a862; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00512a; color: #f5f5f5;
border: 1px solid #276b4a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87ab9a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #065f33; color: #26a862;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00512a; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #276b4a;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87ab9a; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87ab9a; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#26a862; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00512a; color:#26a862;
border:1px solid #26a862; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#065f33; color:#26a862;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #276b4a; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87ab9a; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #276b4a; padding: 18px 40px; color:#87ab9a;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Cathay</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Cathay</span>
<span>Cathay · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #242428; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #242428; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #979799; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #242428; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #242428; color: #f5f5f5;
border: 1px solid #454549; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #979799; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2c2e48; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#242428; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #454549;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#979799; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#979799; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#242428; color:#5865f2;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2c2e48; color:#5865f2;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #454549; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#979799; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #454549; padding: 18px 40px; color:#979799;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Channel Talk</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Channel Talk</span>
<span>Channel Talk · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0f0f10; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0f0f10; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8e8e8e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1c1c1f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0f0f10; color: #ffffff;
border: 1px solid #1c1c1f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0f0f10; color: #f5f5f5;
border: 1px solid #343435; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e8e8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #111112; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0f0f10; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #343435;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8e8e8e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8e8e8e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1c1c1f; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0f0f10; color:#ffffff;
border:1px solid #1c1c1f; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#111112; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #343435; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8e8e8e; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #343435; padding: 18px 40px; color:#8e8e8e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Character.AI (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Character.AI (iOS)</span>
<span>Character.AI (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #009ddc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #009ddc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87cdea; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #003b5c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #009ddc; color: #003b5c;
border: 1px solid #003b5c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #009ddc; color: #f5f5f5;
border: 1px solid #27abe0; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87cdea; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #008dc8; color: #003b5c;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#009ddc; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27abe0;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87cdea; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87cdea; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#003b5c; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#009ddc; color:#003b5c;
border:1px solid #003b5c; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#008dc8; color:#003b5c;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27abe0; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87cdea; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27abe0; padding: 18px 40px; color:#87cdea;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Charles Schwab (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Charles Schwab (iOS)</span>
<span>Charles Schwab (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #212121; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #212121;
border: 1px solid #212121; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dbdbdb; color: #212121;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#212121; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#212121;
border:1px solid #212121; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#dbdbdb; color:#212121;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">ChatGPT (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© ChatGPT (iOS)</span>
<span>ChatGPT (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6fbf8; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6fbf8; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #787a79; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1ec677; color: #000000;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f6fbf8; color: #000000;
border: 1px solid #1ec677; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f6fbf8; color: #111111;
border: 1px solid #d1d6d3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #787a79; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d3f3e3; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f6fbf8; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d1d6d3;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#787a79; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#787a79; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1ec677; color:#000000;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f6fbf8; color:#000000;
border:1px solid #1ec677; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d3f3e3; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d1d6d3; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#787a79; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d1d6d3; padding: 18px 40px; color:#787a79;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Chime (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Chime (iOS)</span>
<span>Chime (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #23569d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #23569d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #96adcd; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #23569d; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #23569d; color: #f5f5f5;
border: 1px solid #456fab; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #96adcd; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4671ad; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#23569d; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #456fab;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#96adcd; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#96adcd; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#23569d; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#4671ad; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #456fab; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#96adcd; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #456fab; padding: 18px 40px; color:#96adcd;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">China Airlines</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© China Airlines</span>
<span>China Airlines · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fff5e1; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fff5e1; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c786f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fff5e1; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fff5e1; color: #111111;
border: 1px solid #d9d1c0; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c786f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fff7e6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fff5e1; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d1c0;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c786f; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c786f; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fff5e1; color:#000000;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fff7e6; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d1c0; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c786f; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d1c0; padding: 18px 40px; color:#7c786f;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Chipotle (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Chipotle (iOS)</span>
<span>Chipotle (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #209cff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #209cff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #95cdfa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff874d; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #209cff; color: #000000;
border: 1px solid #ff874d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #209cff; color: #f5f5f5;
border: 1px solid #42aafd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #95cdfa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4499e3; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#209cff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #42aafd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#95cdfa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#95cdfa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff874d; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#209cff; color:#000000;
border:1px solid #ff874d; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#4499e3; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #42aafd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#95cdfa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #42aafd; padding: 18px 40px; color:#95cdfa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Chunghwa Telecom</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Chunghwa Telecom</span>
<span>Chunghwa Telecom · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0c0e14; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #0c0e14;
border: 1px solid #0c0e14; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d8d8d9; color: #0c0e14;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0c0e14; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#0c0e14;
border:1px solid #0c0e14; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d8d8d9; color:#0c0e14;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Citymapper (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Citymapper (iOS)</span>
<span>Citymapper (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5d00; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5d00; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fab187; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5d00; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5d00; color: #f5f5f5;
border: 1px solid #fd7527; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fab187; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff7729; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff5d00; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd7527;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#fab187; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#fab187; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff5d00; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ff7729; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd7527; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#fab187; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd7527; padding: 18px 40px; color:#fab187;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Class101</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Class101</span>
<span>Class101 · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00c896; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00c896; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87e1ca; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #17a27e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00c896; color: #000000;
border: 1px solid #17a27e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00c896; color: #000000;
border: 1px solid #27cfa5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87e1ca; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #04c292; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00c896; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27cfa5;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87e1ca; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87e1ca; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#17a27e; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00c896; color:#000000;
border:1px solid #17a27e; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#04c292; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27cfa5; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87e1ca; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27cfa5; padding: 18px 40px; color:#87e1ca;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Classting</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Classting</span>
<span>Classting · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4438; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4438; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faa5a0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f6f6f9; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4438; color: #f6f6f9;
border: 1px solid #f6f6f9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4438; color: #f5f5f5;
border: 1px solid #fd6056; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faa5a0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fe6057; color: #f6f6f9;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff4438; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd6056;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#faa5a0; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#faa5a0; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f6f6f9; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff4438; color:#f6f6f9;
border:1px solid #f6f6f9; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fe6057; color:#f6f6f9;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd6056; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#faa5a0; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd6056; padding: 18px 40px; color:#faa5a0;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Classum</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Classum</span>
<span>Classum · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf9f5; color: #141413;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf9f5; color: #141413;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #141413; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6c6a64; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; background: #cc785c; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; background: #faf9f5; color: #141413;
border: 1px solid #cc785c; border-radius: 8px;
padding: 12px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #faf9f5; color: #141413;
border: 1px solid #c0c0bc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6c6a64; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; background: #efe9de; color: #141413;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#faf9f5; color:#141413; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dad9d5;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; display:flex; gap:28px; color:#6c6a64; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 36px; font-weight: 400; line-height: 1.15; letter-spacing: -0.5px; margin:0; max-width:640px; color:#141413; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin:0; max-width:520px; color:#6c6a64; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; background:#cc785c; color:#ffffff;
border:none; border-radius:8px; padding:12px 20px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; background:#faf9f5; color:#141413;
border:1px solid #cc785c; border-radius:8px;
padding:12px 20px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; background:#efe9de; color:#141413;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dad9d5; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; font-size: 16px; margin:0; color:#141413; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin:0; color:#6c6a64; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; border-top:1px solid #dad9d5; padding: 18px 40px; color:#6c6a64;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Claude</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Claude</span>
<span>Claude · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #c96442; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #c96442; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e1b4a4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f5f4ed; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c96442; color: #f5f4ed;
border: 1px solid #f5f4ed; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #c96442; color: #f5f5f5;
border: 1px solid #d07b5f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e1b4a4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d07b5d; color: #f5f4ed;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#c96442; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d07b5f;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#e1b4a4; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#e1b4a4; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f5f4ed; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#c96442; color:#f5f4ed;
border:1px solid #f5f4ed; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d07b5d; color:#f5f4ed;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d07b5f; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#e1b4a4; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d07b5f; padding: 18px 40px; color:#e1b4a4;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Claude (Anthropic)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Claude (Anthropic)</span>
<span>Claude (Anthropic) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f4ed; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f4ed; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #797774; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d97757; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f8f4ed; color: #d97757;
border: 1px solid #d97757; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f8f4ed; color: #111111;
border: 1px solid #d3d0ca; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #797774; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f3e0d5; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f4ed; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d3d0ca;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#797774; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#797774; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#d97757; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f8f4ed; color:#d97757;
border:1px solid #d97757; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#f3e0d5; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d3d0ca; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#797774; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d3d0ca; padding: 18px 40px; color:#797774;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Claude (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Claude (iOS)</span>
<span>Claude (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffaf0; color: #0a0a0a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffaf0; color: #0a0a0a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #0a0a0a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background: #0a0a0a; color: #ffffff;
border: none; border-radius: 12px; padding: 12px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background: #fffaf0; color: #0a0a0a;
border: 1px solid #0a0a0a; border-radius: 12px;
padding: 12px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #fffaf0; color: #0a0a0a;
border: 1px solid #c2beb6; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; background: #f5f0e0; color: #0a0a0a;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fffaf0; color:#0a0a0a; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #ddd8d0;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; display:flex; gap:28px; color:#6a6a6a; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 40px; font-weight: 500; line-height: 1.1; letter-spacing: -1px; margin:0; max-width:640px; color:#0a0a0a; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin:0; max-width:520px; color:#6a6a6a; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background:#0a0a0a; color:#ffffff;
border:none; border-radius:12px; padding:12px 20px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background:#fffaf0; color:#0a0a0a;
border:1px solid #0a0a0a; border-radius:12px;
padding:12px 20px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; background:#f5f0e0; color:#0a0a0a;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #ddd8d0; border-radius: 12px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; font-size: 16px; margin:0; color:#0a0a0a; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin:0; color:#6a6a6a; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; border-top:1px solid #ddd8d0; padding: 18px 40px; color:#6a6a6a;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Clay</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Clay</span>
<span>Clay · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fefdfb; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #fefdfb;
border: 1px solid #fefdfb; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292828; color: #fefdfb;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fefdfb; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#fefdfb;
border:1px solid #fefdfb; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#292828; color:#fefdfb;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Clay</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Clay</span>
<span>Clay · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faff69; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faff69; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7a7c39; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #131312; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #faff69; color: #131312;
border: 1px solid #131312; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #faff69; color: #111111;
border: 1px solid #d5d95b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7c39; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d5d95b; color: #131312;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#faff69; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d5d95b;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7a7c39; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7a7c39; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#131312; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#faff69; color:#131312;
border:1px solid #131312; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d5d95b; color:#131312;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d5d95b; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7a7c39; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d5d95b; padding: 18px 40px; color:#7a7c39;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">ClickHouse</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© ClickHouse</span>
<span>ClickHouse · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a0a; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a0a; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background: #faff69; color: #0a0a0a;
border: none; border-radius: 8px; padding: 12px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background: #1a1a1a; color: #ffffff;
border: 1px solid #faff69; border-radius: 8px;
padding: 12px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #1a1a1a; color: #ffffff;
border: 1px solid #474747; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; background: #1a1a1a; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0a0a0a; color:#ffffff; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2c2c2c;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.3px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; display:flex; gap:28px; color:#888888; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 40px; font-weight: 700; line-height: 1.15; letter-spacing: -1.5px; margin:0; max-width:640px; color:#ffffff; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin:0; max-width:520px; color:#888888; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background:#faff69; color:#0a0a0a;
border:none; border-radius:8px; padding:12px 20px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background:#1a1a1a; color:#ffffff;
border:1px solid #faff69; border-radius:8px;
padding:12px 20px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; background:#1a1a1a; color:#ffffff;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2c2c2c; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.3px; font-size: 16px; margin:0; color:#ffffff; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin:0; color:#888888; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; border-top:1px solid #2c2c2c; padding: 18px 40px; color:#888888;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">ClickHouse</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© ClickHouse</span>
<span>ClickHouse · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1b1b2e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #1b1b2e;
border: 1px solid #1b1b2e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dbdbde; color: #1b1b2e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1b1b2e; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#1b1b2e;
border:1px solid #1b1b2e; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#dbdbde; color:#1b1b2e;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">ClickUp (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© ClickUp (iOS)</span>
<span>ClickUp (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6821f; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6821f; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #784417; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f6821f; color: #000;
border: 1px solid #000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f6821f; color: #111111;
border: 1px solid #d1701d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #784417; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cf6d1a; color: #000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f6821f; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d1701d;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#784417; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#784417; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f6821f; color:#000;
border:1px solid #000; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#cf6d1a; color:#000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d1701d; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#784417; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d1701d; padding: 18px 40px; color:#784417;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Cloudflare</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Cloudflare</span>
<span>Cloudflare · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f2efe4; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f2efe4; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #767570; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #38b569; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2efe4; color: #000000;
border: 1px solid #38b569; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f2efe4; color: #111111;
border: 1px solid #cecbc2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767570; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d4e6d0; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f2efe4; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #cecbc2;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#767570; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#767570; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#38b569; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f2efe4; color:#000000;
border:1px solid #38b569; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d4e6d0; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #cecbc2; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#767570; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #cecbc2; padding: 18px 40px; color:#767570;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Clubhouse (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Clubhouse (iOS)</span>
<span>Clubhouse (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #9933ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #9933ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #cc9efa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #8f00ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #9933ff; color: #ffffff;
border: 1px solid #8f00ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #9933ff; color: #f5f5f5;
border: 1px solid #a852fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #cc9efa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #972bff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#9933ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #a852fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#cc9efa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#cc9efa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#8f00ff; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#9933ff; color:#ffffff;
border:1px solid #8f00ff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#972bff; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #a852fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#cc9efa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #a852fd; padding: 18px 40px; color:#cc9efa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Codeit</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Codeit</span>
<span>Codeit · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #a0522d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #a0522d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #cfac9b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f4623a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #a0522d; color: #ffffff;
border: 1px solid #f4623a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #a0522d; color: #f5f5f5;
border: 1px solid #ae6c4d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #cfac9b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ad552f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#a0522d; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #ae6c4d;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#cfac9b; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#cfac9b; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f4623a; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#a0522d; color:#ffffff;
border:1px solid #f4623a; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ad552f; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #ae6c4d; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#cfac9b; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #ae6c4d; padding: 18px 40px; color:#cfac9b;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Coffee Meets Bagel (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Coffee Meets Bagel (iOS)</span>
<span>Coffee Meets Bagel (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #17171c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #17171c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #919193; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #17171c; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #17171c; color: #f5f5f5;
border: 1px solid #3b3b3f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #919193; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3c3c40; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#17171c; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3b3b3f;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#919193; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#919193; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#17171c; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#3c3c40; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3b3b3f; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#919193; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3b3b3f; padding: 18px 40px; color:#919193;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Cohere</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Cohere</span>
<span>Cohere · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; margin: 0; color: #93939f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.71; background: #17171c; color: #ffffff;
border: none; border-radius: 32px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; background: transparent; color: #212121;
border: 1px solid #17171c; border-radius: 4px;
padding: 8px 0; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #ffffff; color: #212121;
border: 1px solid #c8c8c8; border-radius: 16px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #93939f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.2; letter-spacing: -0.32px; background: transparent; color: #ff7759;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212121; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #e0e0e0;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; display:flex; gap:28px; color:#93939f; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 400; line-height: 1.2; letter-spacing: -0.48px; margin:0; max-width:640px; color:#212121; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; margin:0; max-width:520px; color:#93939f; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.71; background:#17171c; color:#ffffff;
border:none; border-radius:32px; padding:12px 24px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; background:transparent; color:#212121;
border:1px solid #17171c; border-radius:4px;
padding:8px 0; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.2; letter-spacing: -0.32px; background:transparent; color:#ff7759;
border-radius:8px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #e0e0e0; border-radius: 4px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; font-size: 16px; margin:0; color:#212121; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; margin:0; color:#93939f; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; border-top:1px solid #e0e0e0; padding: 18px 40px; color:#93939f;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Cohere</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Cohere</span>
<span>Cohere · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0a0b0d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0a0b0d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.33; margin: 0; color: #0a0b0d; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7c828a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.15; background: #0052ff; color: #ffffff;
border: none; border-radius: 100px; padding: 12px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.15; background: #eef0f3; color: #0a0b0d;
border: 1px solid #0052ff; border-radius: 100px;
padding: 12px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #0a0b0d;
border: 1px solid #c2c2c2; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c828a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.5; background: #eef0f3; color: #0a0b0d;
border-radius: 100px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0a0b0d; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dddddd;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.33; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; display:flex; gap:28px; color:#7c828a; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 44px; font-weight: 400; line-height: 1.09; letter-spacing: -1px; margin:0; max-width:640px; color:#0a0b0d; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin:0; max-width:520px; color:#7c828a; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.15; background:#0052ff; color:#ffffff;
border:none; border-radius:100px; padding:12px 20px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.15; background:#eef0f3; color:#0a0b0d;
border:1px solid #0052ff; border-radius:100px;
padding:12px 20px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.5; background:#eef0f3; color:#0a0b0d;
border-radius:100px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dddddd; border-radius: 100px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.33; font-size: 16px; margin:0; color:#0a0b0d; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin:0; color:#7c828a; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; border-top:1px solid #dddddd; padding: 18px 40px; color:#7c828a;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Coinbase</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Coinbase</span>
<span>Coinbase · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0052ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0052ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87acfa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #578bfa; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0052ff; color: #ffffff;
border: 1px solid #578bfa; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0052ff; color: #f5f5f5;
border: 1px solid #276cfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87acfa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e5bfe; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0052ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #276cfd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87acfa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87acfa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#578bfa; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0052ff; color:#ffffff;
border:1px solid #578bfa; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0e5bfe; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #276cfd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87acfa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #276cfd; padding: 18px 40px; color:#87acfa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Coinbase</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Coinbase</span>
<span>Coinbase · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0052ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0052ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87acfa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7931a; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0052ff; color: #f7931a;
border: 1px solid #f7931a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0052ff; color: #f5f5f5;
border: 1px solid #276cfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87acfa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #285cda; color: #f7931a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0052ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #276cfd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87acfa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87acfa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f7931a; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0052ff; color:#f7931a;
border:1px solid #f7931a; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#285cda; color:#f7931a;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #276cfd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87acfa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #276cfd; padding: 18px 40px; color:#87acfa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Coinbase (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Coinbase (iOS)</span>
<span>Coinbase (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #006bd6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #006bd6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b7e7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0090ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #006bd6; color: #ffffff;
border: 1px solid #0090ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #006bd6; color: #f5f5f5;
border: 1px solid #2781db; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b7e7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0071dd; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#006bd6; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2781db;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87b7e7; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87b7e7; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0090ff; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#006bd6; color:#ffffff;
border:1px solid #0090ff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0071dd; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2781db; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87b7e7; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2781db; padding: 18px 40px; color:#87b7e7;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Coinone</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Coinone</span>
<span>Coinone · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0f0f0f; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0f0f0f; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -0.5px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; background: #0007cd; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 18px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; background: #222222; color: #ffffff;
border: 1px solid #0007cd; border-radius: 8px;
padding: 10px 18px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #181818; color: #ffffff;
border: 1px solid #4b4b4b; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.88px; background: #222222; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0f0f0f; color:#ffffff; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #313131;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -0.5px; font-size: 18px; margin:0; }
.navlinks { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; display:flex; gap:28px; color:#888888; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 44px; font-weight: 500; line-height: 1.1; letter-spacing: -1.32px; margin:0; max-width:640px; color:#ffffff; }
.hero p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin:0; max-width:520px; color:#888888; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; background:#0007cd; color:#ffffff;
border:none; border-radius:8px; padding:10px 18px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; background:#222222; color:#ffffff;
border:1px solid #0007cd; border-radius:8px;
padding:10px 18px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.88px; background:#222222; color:#ffffff;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #313131; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -0.5px; font-size: 16px; margin:0; color:#ffffff; }
.feature-card p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin:0; color:#888888; }
footer {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; border-top:1px solid #313131; padding: 18px 40px; color:#888888;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Composio</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Composio</span>
<span>Composio · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #6366f1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #6366f1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b3b5f3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0007cd; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #6366f1; color: #000000;
border: 1px solid #0007cd; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #6366f1; color: #f5f5f5;
border: 1px solid #7a7df2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b3b5f3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5357eb; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#6366f1; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #7a7df2;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#b3b5f3; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#b3b5f3; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0007cd; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#6366f1; color:#000000;
border:1px solid #0007cd; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#5357eb; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #7a7df2; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#b3b5f3; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #7a7df2; padding: 18px 40px; color:#b3b5f3;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Composio</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Composio</span>
<span>Composio · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff9933; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff9933; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c4e20; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f8f6f2; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff9933; color: #000000;
border: 1px solid #f8f6f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff9933; color: #111111;
border: 1px solid #d9832e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c4e20; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fea852; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff9933; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9832e;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c4e20; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c4e20; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f8f6f2; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff9933; color:#000000;
border:1px solid #f8f6f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fea852; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9832e; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c4e20; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9832e; padding: 18px 40px; color:#7c4e20;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Cookpad</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Cookpad</span>
<span>Cookpad · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a2352; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a2352; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9296ac; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #046cb8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a2352; color: #046cb8;
border: 1px solid #046cb8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a2352; color: #f5f5f5;
border: 1px solid #3d456c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9296ac; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #162f62; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1a2352; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3d456c;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#9296ac; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#9296ac; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#046cb8; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1a2352; color:#046cb8;
border:1px solid #046cb8; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#162f62; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3d456c; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#9296ac; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3d456c; padding: 18px 40px; color:#9296ac;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Corca</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Corca</span>
<span>Corca · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#292929; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Coupang</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Coupang</span>
<span>Coupang · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfcfd; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfcfd; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fcfcfd; color: #1a1a1e;
border: 1px solid #1a1a1e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fcfcfd; color: #111111;
border: 1px solid #d6d6d7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d8d8d9; color: #1a1a1e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fcfcfd; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d6d6d7;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7b7b7b; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7b7b7b; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1a1a1e; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fcfcfd; color:#1a1a1e;
border:1px solid #1a1a1e; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d8d8d9; color:#1a1a1e;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d6d6d7; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7b7b7b; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d6d6d7; padding: 18px 40px; color:#7b7b7b;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Craft (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Craft (iOS)</span>
<span>Craft (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f47521; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #f47521;
border: 1px solid #f47521; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #271305; color: #f47521;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f47521; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#f47521;
border:1px solid #f47521; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#271305; color:#f47521;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Crunchyroll (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Crunchyroll (iOS)</span>
<span>Crunchyroll (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #03060f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #03060f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #88898e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b1426; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #03060f; color: #ffffff;
border: 1px solid #0b1426; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #03060f; color: #f5f5f5;
border: 1px solid #2a2c34; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #88898e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #040813; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#03060f; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2a2c34;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#88898e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#88898e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0b1426; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#03060f; color:#ffffff;
border:1px solid #0b1426; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#040813; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2a2c34; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#88898e; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2a2c34; padding: 18px 40px; color:#88898e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Crypto.com (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Crypto.com (iOS)</span>
<span>Crypto.com (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5be3d3; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5be3d3; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #327068; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #24cdb9; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5be3d3; color: #000000;
border: 1px solid #24cdb9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5be3d3; color: #111111;
border: 1px solid #4fc1b4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #327068; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #52dfcf; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#5be3d3; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #4fc1b4;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#327068; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#327068; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#24cdb9; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5be3d3; color:#000000;
border:1px solid #24cdb9; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#52dfcf; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #4fc1b4; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#327068; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #4fc1b4; padding: 18px 40px; color:#327068;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Cubo Ai</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Cubo Ai</span>
<span>Cubo Ai · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f4; color: #26251e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f4; color: #26251e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: -0.11px; margin: 0; color: #26251e; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #807d72; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; background: #f54e00; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 18px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; background: #ffffff; color: #26251e;
border: 1px solid #f54e00; border-radius: 8px;
padding: 9px 17px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #26251e;
border: 1px solid #c3c2be; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #807d72; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.88px; background: #e6e5e0; color: #26251e;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f4; color:#26251e; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dadad6;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: -0.11px; font-size: 18px; margin:0; }
.navlinks { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; display:flex; gap:28px; color:#807d72; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 36px; font-weight: 400; line-height: 1.2; letter-spacing: -0.72px; margin:0; max-width:640px; color:#26251e; }
.hero p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin:0; max-width:520px; color:#807d72; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; background:#f54e00; color:#ffffff;
border:none; border-radius:8px; padding:10px 18px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; background:#ffffff; color:#26251e;
border:1px solid #f54e00; border-radius:8px;
padding:9px 17px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.88px; background:#e6e5e0; color:#26251e;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dadad6; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: -0.11px; font-size: 16px; margin:0; color:#26251e; }
.feature-card p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin:0; color:#807d72; }
footer {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; border-top:1px solid #dadad6; padding: 18px 40px; color:#807d72;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Cursor</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Cursor</span>
<span>Cursor · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #26251e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #26251e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #989794; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7f7f4; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #26251e; color: #f7f7f4;
border: 1px solid #f7f7f4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #26251e; color: #f5f5f5;
border: 1px solid #474640; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #989794; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #474740; color: #f7f7f4;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#26251e; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #474640;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#989794; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#989794; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f7f7f4; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#26251e; color:#f7f7f4;
border:1px solid #f7f7f4; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#474740; color:#f7f7f4;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #474640; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#989794; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #474640; padding: 18px 40px; color:#989794;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Cursor</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Cursor</span>
<span>Cursor · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #139cb7; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #139cb7; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8fcdd9; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #333333; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #139cb7; color: #333333;
border: 1px solid #333333; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #139cb7; color: #f5f5f5;
border: 1px solid #37aac1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8fcdd9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #188ba2; color: #333333;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#139cb7; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #37aac1;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8fcdd9; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8fcdd9; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#333333; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#139cb7; color:#333333;
border:1px solid #333333; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#188ba2; color:#333333;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #37aac1; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8fcdd9; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #37aac1; padding: 18px 40px; color:#8fcdd9;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Cybozu</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Cybozu</span>
<span>Cybozu · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1c1c1e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #1c1c1e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #040405; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1c1c1e; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #1c1c1e; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#040405; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">DJI</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© DJI</span>
<span>DJI · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #94bcff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #94bcff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #4c5e7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #323232; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #94bcff; color: #323232;
border: 1px solid #323232; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #94bcff; color: #111111;
border: 1px solid #7fa1d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #4c5e7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #84a6de; color: #323232;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#94bcff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #7fa1d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#4c5e7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#4c5e7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#323232; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#94bcff; color:#323232;
border:1px solid #323232; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#84a6de; color:#323232;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #7fa1d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#4c5e7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #7fa1d9; padding: 18px 40px; color:#4c5e7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">DMM.com (Turtle)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© DMM.com (Turtle)</span>
<span>DMM.com (Turtle) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff3478; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff3478; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fa9ebd; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff3478; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff3478; color: #f5f5f5;
border: 1px solid #fd538c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fa9ebd; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff548e; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff3478; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd538c;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#fa9ebd; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#fa9ebd; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff3478; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ff548e; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd538c; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#fa9ebd; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd538c; padding: 18px 40px; color:#fa9ebd;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Dabang</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Dabang</span>
<span>Dabang · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0071ce; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0071ce; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bae3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #56cfc2; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0071ce; color: #56cfc2;
border: 1px solid #56cfc2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0071ce; color: #f5f5f5;
border: 1px solid #2786d4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bae3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e80cc; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0071ce; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2786d4;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87bae3; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87bae3; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#56cfc2; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0071ce; color:#56cfc2;
border:1px solid #56cfc2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0e80cc; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2786d4; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87bae3; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2786d4; padding: 18px 40px; color:#87bae3;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Dable</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Dable</span>
<span>Dable · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #06b87f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #06b87f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #89dac0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2070eb; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #06b87f; color: #000000;
border: 1px solid #2070eb; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #06b87f; color: #000000;
border: 1px solid #2cc292; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #89dac0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0aac90; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#06b87f; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2cc292;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#89dac0; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#89dac0; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2070eb; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#06b87f; color:#000000;
border:1px solid #2070eb; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0aac90; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2cc292; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#89dac0; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2cc292; padding: 18px 40px; color:#89dac0;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Danawa</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Danawa</span>
<span>Danawa · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff3621; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff3621; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fa9f96; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b2026; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff3621; color: #0b2026;
border: 1px solid #0b2026; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff3621; color: #f5f5f5;
border: 1px solid #fd5543; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fa9f96; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d83222; color: #0b2026;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff3621; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd5543;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#fa9f96; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#fa9f96; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0b2026; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff3621; color:#0b2026;
border:1px solid #0b2026; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d83222; color:#0b2026;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd5543; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#fa9f96; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd5543; padding: 18px 40px; color:#fa9f96;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Databricks</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Databricks</span>
<span>Databricks · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #632ca6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #632ca6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b39bd1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #8000ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #632ca6; color: #ffffff;
border: 1px solid #8000ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #632ca6; color: #f5f5f5;
border: 1px solid #7a4cb3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b39bd1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #6825b4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#632ca6; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #7a4cb3;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#b39bd1; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#b39bd1; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#8000ff; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#632ca6; color:#ffffff;
border:1px solid #8000ff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#6825b4; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #7a4cb3; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#b39bd1; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #7a4cb3; padding: 18px 40px; color:#b39bd1;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Datadog</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Datadog</span>
<span>Datadog · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #191919; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #191919; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #929292; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #191919; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #191919; color: #f5f5f5;
border: 1px solid #3c3c3c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #929292; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3e3e3e; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#191919; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3c3c3c;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#929292; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#929292; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#191919; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#3e3e3e; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3c3c3c; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#929292; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3c3c3c; padding: 18px 40px; color:#929292;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Datarize</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Datarize</span>
<span>Datarize · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0086ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0086ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87c3fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0086ff; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0086ff; color: #f5f5f5;
border: 1px solid #2798fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87c3fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0071d6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0086ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2798fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87c3fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87c3fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0086ff; color:#000000;
border:1px solid #000000; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0071d6; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2798fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87c3fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2798fd; padding: 18px 40px; color:#87c3fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Dcard</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Dcard</span>
<span>Dcard · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0e0e10; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0e0e10; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d8d8e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e0e10; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0e0e10; color: #f5f5f5;
border: 1px solid #333335; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8d8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #353536; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0e0e10; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #333335;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8d8d8e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8d8d8e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0e0e10; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#353536; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #333335; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8d8d8e; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #333335; padding: 18px 40px; color:#8d8d8e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">DeepSeek (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© DeepSeek (iOS)</span>
<span>DeepSeek (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0f0d13; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0f0d13; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8e8d8f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #a238ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0f0d13; color: #a238ff;
border: 1px solid #a238ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0f0d13; color: #f5f5f5;
border: 1px solid #343237; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e8d8f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #271439; color: #a238ff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0f0d13; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #343237;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8e8d8f; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8e8d8f; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#a238ff; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0f0d13; color:#a238ff;
border:1px solid #a238ff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#271439; color:#a238ff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #343237; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8e8d8f; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #343237; padding: 18px 40px; color:#8e8d8f;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Deezer (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Deezer (iOS)</span>
<span>Deezer (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00ccbc; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00ccbc; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #09655e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00ccbc; color: #121212;
border: 1px solid #121212; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00ccbc; color: #111111;
border: 1px solid #03aea1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #09655e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #03aea1; color: #121212;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00ccbc; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #03aea1;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#09655e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#09655e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#121212; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00ccbc; color:#121212;
border:1px solid #121212; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#03aea1; color:#121212;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #03aea1; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#09655e; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #03aea1; padding: 18px 40px; color:#09655e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Deliveroo</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Deliveroo</span>
<span>Deliveroo · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00ccbc; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #00ccbc; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6f7f4; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00ccbc; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#000000;
border:1px solid #00ccbc; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d6f7f4; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Deliveroo (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Deliveroo (iOS)</span>
<span>Deliveroo (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0076ce; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0076ce; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bce3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0063af; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0076ce; color: #ffffff;
border: 1px solid #0063af; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0076ce; color: #f5f5f5;
border: 1px solid #278ad4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bce3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0073c9; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0076ce; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #278ad4;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87bce3; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87bce3; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0063af; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0076ce; color:#ffffff;
border:1px solid #0063af; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0073c9; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #278ad4; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87bce3; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #278ad4; padding: 18px 40px; color:#87bce3;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Dell</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Dell</span>
<span>Dell · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 900; line-height: 1.05; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 700; line-height: 1.0; background: #000000; color: #ffffff;
border: none; border-radius: 0px; padding: 6px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 700; line-height: 1.0; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 0px;
padding: 6px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #fcdfe1; color: #e91d2a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dbdbdb;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 900; line-height: 1.05; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#666666; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 36px; font-weight: 900; line-height: 1.0; margin:0; max-width:640px; color:#000000; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#666666; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 700; line-height: 1.0; background:#000000; color:#ffffff;
border:none; border-radius:0px; padding:6px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 700; line-height: 1.0; background:#ffffff; color:#000000;
border:1px solid #000000; border-radius:0px;
padding:6px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background:#fcdfe1; color:#e91d2a;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dbdbdb; border-radius: 0px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 900; line-height: 1.05; font-size: 16px; margin:0; color:#000000; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; margin:0; color:#666666; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; border-top:1px solid #dbdbdb; padding: 18px 40px; color:#666666;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Dell (1996)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Dell (1996)</span>
<span>Dell (1996) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #003268; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #003268; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #879db6; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c8102e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #003268; color: #ffffff;
border: 1px solid #c8102e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #003268; color: #f5f5f5;
border: 1px solid #27517f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #879db6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #202d5f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#003268; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27517f;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#879db6; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#879db6; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#c8102e; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#003268; color:#ffffff;
border:1px solid #c8102e; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#202d5f; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27517f; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#879db6; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27517f; padding: 18px 40px; color:#879db6;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Delta (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Delta (iOS)</span>
<span>Delta (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5f00; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5f00; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fab287; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff8200; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5f00; color: #000000;
border: 1px solid #ff8200; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5f00; color: #f5f5f5;
border: 1px solid #fd7727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fab287; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff6500; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff5f00; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd7727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#fab287; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#fab287; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff8200; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff5f00; color:#000000;
border:1px solid #ff8200; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ff6500; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd7727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#fab287; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd7727; padding: 18px 40px; color:#fab287;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Devsisters</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Devsisters</span>
<span>Devsisters · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0017c1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0017c1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8791de; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00118f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0017c1; color: #ffffff;
border: 1px solid #00118f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0017c1; color: #f5f5f5;
border: 1px solid #273bc9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8791de; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0016b9; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0017c1; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #273bc9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8791de; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8791de; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00118f; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0017c1; color:#ffffff;
border:1px solid #00118f; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0016b9; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #273bc9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8791de; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #273bc9; padding: 18px 40px; color:#8791de;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Digital Agency Design System (DADS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Digital Agency Design System (DADS)</span>
<span>Digital Agency Design System (DADS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5865f2; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5865f2; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #aeb4f4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4752c4; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: 1px solid #4752c4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5865f2; color: #f5f5f5;
border: 1px solid #717cf2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aeb4f4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5562eb; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#5865f2; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #717cf2;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#aeb4f4; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#aeb4f4; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#4752c4; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:1px solid #4752c4; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#5562eb; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #717cf2; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#aeb4f4; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #717cf2; padding: 18px 40px; color:#aeb4f4;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Discord</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Discord</span>
<span>Discord · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5865f2; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5865f2; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #aeb4f4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1e1f22; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #1e1f22;
border: 1px solid #1e1f22; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5865f2; color: #f5f5f5;
border: 1px solid #717cf2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aeb4f4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4f5ad1; color: #1e1f22;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#5865f2; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #717cf2;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#aeb4f4; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#aeb4f4; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1e1f22; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#1e1f22;
border:1px solid #1e1f22; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#4f5ad1; color:#1e1f22;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #717cf2; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#aeb4f4; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #717cf2; padding: 18px 40px; color:#aeb4f4;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Discord (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Discord (iOS)</span>
<span>Discord (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0e2a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0e2a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8b8d9a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #12152e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0e2a; color: #ffffff;
border: 1px solid #12152e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a0e2a; color: #f5f5f5;
border: 1px solid #30334a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8d9a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0b0f2b; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0a0e2a; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #30334a;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8b8d9a; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8b8d9a; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#12152e; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0a0e2a; color:#ffffff;
border:1px solid #12152e; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0b0f2b; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #30334a; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8b8d9a; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #30334a; padding: 18px 40px; color:#8b8d9a;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Disney+ (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Disney+ (iOS)</span>
<span>Disney+ (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f4f4f4; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f4f4f4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfdfd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f4f4f4; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#000000;
border:1px solid #f4f4f4; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fdfdfd; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Domino's (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Domino's (iOS)</span>
<span>Domino's (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eb1700; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eb1700; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f09187; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #191919; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #eb1700; color: #191919;
border: 1px solid #191919; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #eb1700; color: #f5f5f5;
border: 1px solid #ed3b27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f09187; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #c91704; color: #191919;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#eb1700; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #ed3b27;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f09187; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f09187; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#191919; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#eb1700; color:#191919;
border:1px solid #191919; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#c91704; color:#191919;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #ed3b27; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f09187; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #ed3b27; padding: 18px 40px; color:#f09187;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">DoorDash</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© DoorDash</span>
<span>DoorDash · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eb1700; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eb1700; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f09187; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #eb1700; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #eb1700; color: #f5f5f5;
border: 1px solid #ed3b27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f09187; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ee3c29; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#eb1700; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #ed3b27;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f09187; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f09187; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#eb1700; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ee3c29; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #ed3b27; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f09187; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #ed3b27; padding: 18px 40px; color:#f09187;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">DoorDash (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© DoorDash (iOS)</span>
<span>DoorDash (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff8d00; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff8d00; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c4909; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fd7e14; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff8d00; color: #000000;
border: 1px solid #fd7e14; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff8d00; color: #111111;
border: 1px solid #d97903; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c4909; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff8b03; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff8d00; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d97903;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c4909; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c4909; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fd7e14; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff8d00; color:#000000;
border:1px solid #fd7e14; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ff8b03; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d97903; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c4909; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d97903; padding: 18px 40px; color:#7c4909;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Dr. Now</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Dr. Now</span>
<span>Dr. Now · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7a00ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7a00ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #be87fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7a00ff; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7a00ff; color: #f5f5f5;
border: 1px solid #8e27fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #be87fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #6600d6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#7a00ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #8e27fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#be87fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#be87fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#7a00ff; color:#000000;
border:1px solid #000000; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#6600d6; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #8e27fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#be87fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #8e27fd; padding: 18px 40px; color:#be87fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Dr.Cha (Autopedia)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Dr.Cha (Autopedia)</span>
<span>Dr.Cha (Autopedia) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3eaeff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3eaeff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #25587c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5a8c; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3eaeff; color: #000000;
border: 1px solid #ff5a8c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3eaeff; color: #111111;
border: 1px solid #3795d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #25587c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5da1ed; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#3eaeff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3795d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#25587c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#25587c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff5a8c; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3eaeff; color:#000000;
border:1px solid #ff5a8c; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#5da1ed; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3795d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#25587c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3795d9; padding: 18px 40px; color:#25587c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Dr.diary</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Dr.diary</span>
<span>Dr.diary · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0061fe; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0061fe; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b2f9; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7f5f2; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0061fe; color: #f7f5f2;
border: 1px solid #f7f5f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0061fe; color: #f5f5f5;
border: 1px solid #2779fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b2f9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2879fc; color: #f7f5f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0061fe; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2779fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87b2f9; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87b2f9; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f7f5f2; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0061fe; color:#f7f5f2;
border:1px solid #f7f5f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2879fc; color:#f7f5f2;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2779fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87b2f9; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2779fd; padding: 18px 40px; color:#87b2f9;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Dropbox</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Dropbox</span>
<span>Dropbox · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7f5f2; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f7f5f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fefdfd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f7f5f2; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#000000;
border:1px solid #f7f5f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fefdfd; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Dropbox (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Dropbox (iOS)</span>
<span>Dropbox (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #58cc02; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #58cc02; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #31650a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a73e8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #58cc02; color: #000000;
border: 1px solid #1a73e8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #58cc02; color: #111111;
border: 1px solid #4dae04; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #31650a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4ebe27; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#58cc02; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #4dae04;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#31650a; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#31650a; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1a73e8; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#58cc02; color:#000000;
border:1px solid #1a73e8; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#4ebe27; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #4dae04; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#31650a; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #4dae04; padding: 18px 40px; color:#31650a;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Duolingo</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Duolingo</span>
<span>Duolingo · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #58cc02; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #58cc02; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e4f7d7; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#58cc02; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#000000;
border:1px solid #58cc02; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#e4f7d7; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Duolingo (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Duolingo (iOS)</span>
<span>Duolingo (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00a19b; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00a19b; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87cfcc; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #007a7a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a19b; color: #000000;
border: 1px solid #007a7a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00a19b; color: #f5f5f5;
border: 1px solid #27aea9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87cfcc; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #009b96; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00a19b; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27aea9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87cfcc; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87cfcc; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#007a7a; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00a19b; color:#000000;
border:1px solid #007a7a; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#009b96; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27aea9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87cfcc; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27aea9; padding: 18px 40px; color:#87cfcc;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">E.SUN Bank</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© E.SUN Bank</span>
<span>E.SUN Bank · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0e0f11; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0e0f11; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d8e8e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d50a0a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e0f11; color: #d50a0a;
border: 1px solid #d50a0a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0e0f11; color: #f5f5f5;
border: 1px solid #333435; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8e8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2e0e10; color: #d50a0a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0e0f11; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #333435;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8d8e8e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8d8e8e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#d50a0a; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0e0f11; color:#d50a0a;
border:1px solid #d50a0a; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2e0e10; color:#d50a0a;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #333435; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8d8e8e; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #333435; padding: 18px 40px; color:#8d8e8e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">ESPN (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© ESPN (iOS)</span>
<span>ESPN (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #4b7d6b; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #4b7d6b; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a8bfb7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4b7d6b; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #4b7d6b; color: #f5f5f5;
border: 1px solid #669081; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a8bfb7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #689283; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#4b7d6b; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #669081;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#a8bfb7; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#a8bfb7; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#4b7d6b; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#689283; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #669081; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#a8bfb7; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #669081; padding: 18px 40px; color:#a8bfb7;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">EVA Air</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© EVA Air</span>
<span>EVA Air · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #007bc6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #007bc6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bee0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e4007f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #007bc6; color: #000000;
border: 1px solid #e4007f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #007bc6; color: #f5f5f5;
border: 1px solid #278fce; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bee0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2467bb; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#007bc6; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #278fce;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87bee0; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87bee0; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e4007f; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#007bc6; color:#000000;
border:1px solid #e4007f; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2467bb; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #278fce; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87bee0; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #278fce; padding: 18px 40px; color:#87bee0;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">EasyWallet</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© EasyWallet</span>
<span>EasyWallet · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0b64dd; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0b64dd; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8cb4ea; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1d2a3e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b64dd; color: #1d2a3e;
border: 1px solid #1d2a3e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0b64dd; color: #f5f5f5;
border: 1px solid #307be1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8cb4ea; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e5bc4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0b64dd; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #307be1;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8cb4ea; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8cb4ea; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1d2a3e; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0b64dd; color:#1d2a3e;
border:1px solid #1d2a3e; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0e5bc4; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #307be1; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8cb4ea; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #307be1; padding: 18px 40px; color:#8cb4ea;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Elastic UI</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Elastic UI</span>
<span>Elastic UI · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #787878; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #292524; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f5f5f5; color: #292524;
border: 1px solid #292524; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f5f5f5; color: #111111;
border: 1px solid #d1d1d1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #787878; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d4d4d4; color: #292524;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f5f5; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d1d1d1;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#787878; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#787878; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#292524; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f5f5f5; color:#292524;
border:1px solid #292524; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d4d4d4; color:#292524;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d1d1d1; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#787878; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d1d1d1; padding: 18px 40px; color:#787878;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">ElevenLabs</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© ElevenLabs</span>
<span>ElevenLabs · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#292929; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">ElevenLabs</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© ElevenLabs</span>
<span>ElevenLabs · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7353ea; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7353ea; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #baacf0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #212121; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7353ea; color: #212121;
border: 1px solid #212121; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7353ea; color: #f5f5f5;
border: 1px solid #886dec; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #baacf0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #664bca; color: #212121;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#7353ea; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #886dec;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#baacf0; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#baacf0; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#212121; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#7353ea; color:#212121;
border:1px solid #212121; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#664bca; color:#212121;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #886dec; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#baacf0; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #886dec; padding: 18px 40px; color:#baacf0;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Elice</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Elice</span>
<span>Elice · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #917e57; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #917e57; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #c8bfae; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #917e57; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #917e57; color: #f5f5f5;
border: 1px solid #a19170; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c8bfae; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #887a70; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#917e57; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #a19170;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#c8bfae; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#c8bfae; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#917e57; color:#000000;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#887a70; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #a19170; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#c8bfae; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #a19170; padding: 18px 40px; color:#c8bfae;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Eslite</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Eslite</span>
<span>Eslite · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf5ef; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf5ef; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7a7875; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f1641e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #faf5ef; color: #f1641e;
border: 1px solid #f1641e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #faf5ef; color: #111111;
border: 1px solid #d5d1cb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7875; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f9dece; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#faf5ef; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d5d1cb;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7a7875; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7a7875; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f1641e; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#faf5ef; color:#f1641e;
border:1px solid #f1641e; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#f9dece; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d5d1cb; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7a7875; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d5d1cb; padding: 18px 40px; color:#7a7875;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Etsy (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Etsy (iOS)</span>
<span>Etsy (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00a82d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00a82d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d29b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a82d; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00a82d; color: #f5f5f5;
border: 1px solid #27b44d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d29b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #29b64f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00a82d; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27b44d;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87d29b; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87d29b; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00a82d; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#29b64f; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27b44d; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87d29b; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27b44d; padding: 18px 40px; color:#87d29b;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Evernote (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Evernote (iOS)</span>
<span>Evernote (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1e1e1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1e1e1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: 0px; margin: 0; color: #1e1e1e; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; margin: 0; color: #868e96; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.0; letter-spacing: 0px; background: #6741d9; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.0; letter-spacing: 0px; background: #ffffff; color: #1e1e1e;
border: 1px solid #ced4da; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; background: #ffffff; color: #1e1e1e;
border: 1px solid #e9ecef; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #868e96; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0px; background: #e5dbff; color: #5f3dc4;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1e1e1e; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #e0e0e0;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: 0px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; display:flex; gap:28px; color:#868e96; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 40px; font-weight: 400; line-height: 1.2; letter-spacing: 0px; margin:0; max-width:640px; color:#1e1e1e; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; margin:0; max-width:520px; color:#868e96; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.0; letter-spacing: 0px; background:#6741d9; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.0; letter-spacing: 0px; background:#ffffff; color:#1e1e1e;
border:1px solid #ced4da; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0px; background:#e5dbff; color:#5f3dc4;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #e0e0e0; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: 0px; font-size: 16px; margin:0; color:#1e1e1e; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; margin:0; color:#868e96; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; border-top:1px solid #e0e0e0; padding: 18px 40px; color:#868e96;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Excalidraw</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Excalidraw</span>
<span>Excalidraw · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f5f7fa; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f5f7fa; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfefe; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f5f7fa; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#000000;
border:1px solid #f5f7fa; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fdfefe; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Expedia (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Expedia (iOS)</span>
<span>Expedia (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f0f0f3; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #f0f0f3;
border: 1px solid #f0f0f3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #262627; color: #f0f0f3;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f0f0f3; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#f0f0f3;
border:1px solid #f0f0f3; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#262627; color:#f0f0f3;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Expo</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Expo</span>
<span>Expo · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0d74ce;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0d74ce;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.5px; margin: 0; color: #0d74ce; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #999999; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 18px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; background: #ffffff; color: #171717;
border: 1px solid #000000; border-radius: 8px;
padding: 9px 17px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #171717;
border: 1px solid #c2dcf3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #999999; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.88px; background: #f0f0f3; color: #171717;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0d74ce; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #ddecf8;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.5px; font-size: 18px; margin:0; }
.navlinks { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; display:flex; gap:28px; color:#999999; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 36px; font-weight: 600; line-height: 1.15; letter-spacing: -1.08px; margin:0; max-width:640px; color:#0d74ce; }
.hero p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin:0; max-width:520px; color:#999999; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; background:#000000; color:#ffffff;
border:none; border-radius:8px; padding:10px 18px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; background:#ffffff; color:#171717;
border:1px solid #000000; border-radius:8px;
padding:9px 17px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.88px; background:#f0f0f3; color:#171717;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #ddecf8; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.5px; font-size: 16px; margin:0; color:#0d74ce; }
.feature-card p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin:0; color:#999999; }
footer {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; border-top:1px solid #ddecf8; padding: 18px 40px; color:#999999;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Expo</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Expo</span>
<span>Expo · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3f3fff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3f3fff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a3a3fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2f2fae; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3f3fff; color: #ffffff;
border: 1px solid #2f2fae; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3f3fff; color: #f5f5f5;
border: 1px solid #5c5cfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a3a3fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3c3cf2; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#3f3fff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #5c5cfd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#a3a3fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#a3a3fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2f2fae; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3f3fff; color:#ffffff;
border:1px solid #2f2fae; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#3c3cf2; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #5c5cfd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#a3a3fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #5c5cfd; padding: 18px 40px; color:#a3a3fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">FLO</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© FLO</span>
<span>FLO · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f0f2f5; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f0f2f5; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #757678; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1877f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f0f2f5; color: #1877f2;
border: 1px solid #1877f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f0f2f5; color: #111111;
border: 1px solid #ccced1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757678; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cddef5; color: #1877f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f0f2f5; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #ccced1;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#757678; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#757678; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1877f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f0f2f5; color:#1877f2;
border:1px solid #1877f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#cddef5; color:#1877f2;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #ccced1; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#757678; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #ccced1; padding: 18px 40px; color:#757678;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Facebook (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Facebook (iOS)</span>
<span>Facebook (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00b347; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00b347; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d7a7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00b347; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00b347; color: #f5f5f5;
border: 1px solid #27be63; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d7a7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #29bf64; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00b347; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27be63;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87d7a7; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87d7a7; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00b347; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#29bf64; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27be63; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87d7a7; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27be63; padding: 18px 40px; color:#87d7a7;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">FamilyMart</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© FamilyMart</span>
<span>FamilyMart · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #222222; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #222222; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #969696; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #222222; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #222222; color: #f5f5f5;
border: 1px solid #444444; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #969696; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #454545; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#222222; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #444444;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#969696; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#969696; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#222222; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#454545; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #444444; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#969696; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #444444; padding: 18px 40px; color:#969696;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Farfetch</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Farfetch</span>
<span>Farfetch · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fc1c49; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fc1c49; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f893a8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c9032a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fc1c49; color: #000000;
border: 1px solid #c9032a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fc1c49; color: #f5f5f5;
border: 1px solid #fb3f65; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f893a8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f41844; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fc1c49; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fb3f65;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f893a8; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f893a8; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#c9032a; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fc1c49; color:#000000;
border:1px solid #c9032a; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#f41844; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fb3f65; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f893a8; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fb3f65; padding: 18px 40px; color:#f893a8;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Fastcampus</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Fastcampus</span>
<span>Fastcampus · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e8ff63; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #e8ff63;
border: 1px solid #e8ff63; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #252910; color: #e8ff63;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e8ff63; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#e8ff63;
border:1px solid #e8ff63; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#252910; color:#e8ff63;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Feeld (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Feeld (iOS)</span>
<span>Feeld (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #181818; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #181818; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 500; line-height: 1.5; letter-spacing: 0.195px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.0; letter-spacing: 1.4px; background: #da291c; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.0; letter-spacing: 1.4px; background: transparent; color: #ffffff;
border: 1px solid #da291c; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #181818; color: #ffffff;
border: 1px solid #525252; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 1.1px; background: #303030; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#181818; color:#ffffff; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #383838;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 500; line-height: 1.5; letter-spacing: 0.195px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; display:flex; gap:28px; color:#666666; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 36px; font-weight: 500; line-height: 1.2; letter-spacing: -0.36px; margin:0; max-width:640px; color:#ffffff; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin:0; max-width:520px; color:#666666; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.0; letter-spacing: 1.4px; background:#da291c; color:#ffffff;
border:none; border-radius:0px; padding:14px 32px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.0; letter-spacing: 1.4px; background:transparent; color:#ffffff;
border:1px solid #da291c; border-radius:0px;
padding:13px 31px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 1.1px; background:#303030; color:#ffffff;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #383838; border-radius: 0px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 500; line-height: 1.5; letter-spacing: 0.195px; font-size: 16px; margin:0; color:#ffffff; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin:0; color:#666666; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; border-top:1px solid #383838; padding: 18px 40px; color:#666666;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Ferrari</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Ferrari</span>
<span>Ferrari · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #da291c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #da291c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e99993; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #da291c; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #da291c; color: #f5f5f5;
border: 1px solid #de4a3f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e99993; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e04b40; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#da291c; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #de4a3f;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#e99993; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#e99993; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#da291c; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#e04b40; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #de4a3f; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#e99993; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #de4a3f; padding: 18px 40px; color:#e99993;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Ferrari</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Ferrari</span>
<span>Ferrari · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #368727; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #368727; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9fc498; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00754a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #368727; color: #000000;
border: 1px solid #00754a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #368727; color: #f5f5f5;
border: 1px solid #559948; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9fc498; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2d842d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#368727; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #559948;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#9fc498; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#9fc498; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00754a; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#368727; color:#000000;
border:1px solid #00754a; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2d842d; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #559948; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#9fc498; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #559948; padding: 18px 40px; color:#9fc498;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Fidelity (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Fidelity (iOS)</span>
<span>Fidelity (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.45; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 330; line-height: 1.45; letter-spacing: -0.14px; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 480; line-height: 1.4; letter-spacing: -0.10px; background: #000000; color: #ffffff;
border: none; border-radius: 50px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 480; line-height: 1.4; letter-spacing: -0.10px; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 50px;
padding: 8px 18px 10px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 320; line-height: 1.45; letter-spacing: -0.26px; background: #ffffff; color: #000000;
border: 1px solid #bfbfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dbdbdb; color: #000000;
border-radius: 50px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dbdbdb;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.45; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 330; line-height: 1.45; letter-spacing: -0.14px; display:flex; gap:28px; color:#666666; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 540; line-height: 1.35; letter-spacing: -0.26px; margin:0; max-width:640px; color:#000000; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 330; line-height: 1.45; letter-spacing: -0.14px; margin:0; max-width:520px; color:#666666; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 480; line-height: 1.4; letter-spacing: -0.10px; background:#000000; color:#ffffff;
border:none; border-radius:50px; padding:10px 20px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 480; line-height: 1.4; letter-spacing: -0.10px; background:#ffffff; color:#000000;
border:1px solid #000000; border-radius:50px;
padding:8px 18px 10px; white-space:nowrap; cursor:default;
}
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background:#dbdbdb; color:#000000;
border-radius:50px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dbdbdb; border-radius: 50px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.45; font-size: 16px; margin:0; color:#000000; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 330; line-height: 1.45; letter-spacing: -0.14px; margin:0; color:#666666; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 330; line-height: 1.45; letter-spacing: -0.14px; border-top:1px solid #dbdbdb; padding: 18px 40px; color:#666666;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Figma</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Figma</span>
<span>Figma · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e1027; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#5865f2;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0e1027; color:#5865f2;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Figma</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Figma</span>
<span>Figma · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1e1e1e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #1e1e1e;
border: 1px solid #1e1e1e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dbdbdb; color: #1e1e1e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1e1e1e; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#1e1e1e;
border:1px solid #1e1e1e; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#dbdbdb; color:#1e1e1e;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Figma (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Figma (iOS)</span>
<span>Figma (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #4e2eed; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #4e2eed; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #aa9bf1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5d4cf2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4e2eed; color: #ffffff;
border: 1px solid #5d4cf2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #4e2eed; color: #f5f5f5;
border: 1px solid #694eee; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aa9bf1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5033ee; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#4e2eed; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #694eee;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#aa9bf1; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#aa9bf1; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5d4cf2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#4e2eed; color:#ffffff;
border:1px solid #5d4cf2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#5033ee; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #694eee; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#aa9bf1; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #694eee; padding: 18px 40px; color:#aa9bf1;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Finda</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Finda</span>
<span>Finda · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fb355e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fb355e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f89fb1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fbfaf9; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fb355e; color: #fbfaf9;
border: 1px solid #fbfaf9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fb355e; color: #f5f5f5;
border: 1px solid #fa5476; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f89fb1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fb5577; color: #fbfaf9;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fb355e; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fa5476;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f89fb1; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f89fb1; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fbfaf9; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fb355e; color:#fbfaf9;
border:1px solid #fbfaf9; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fb5577; color:#fbfaf9;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fa5476; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f89fb1; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fa5476; padding: 18px 40px; color:#f89fb1;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Firstory</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Firstory</span>
<span>Firstory · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #001017; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #001017; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878e91; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #002a3a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #001017; color: #ffffff;
border: 1px solid #002a3a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #001017; color: #f5f5f5;
border: 1px solid #27353b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878e91; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00141d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#001017; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27353b;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878e91; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878e91; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#002a3a; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#001017; color:#ffffff;
border:1px solid #002a3a; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#00141d; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27353b; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878e91; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27353b; padding: 18px 40px; color:#878e91;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Fitbit (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Fitbit (iOS)</span>
<span>Fitbit (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0050ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0050ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87abfa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1482ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0050ff; color: #ffffff;
border: 1px solid #1482ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0050ff; color: #f5f5f5;
border: 1px solid #276afd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87abfa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0358ff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0050ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #276afd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87abfa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87abfa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1482ff; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0050ff; color:#ffffff;
border:1px solid #1482ff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0358ff; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #276afd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87abfa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #276afd; padding: 18px 40px; color:#87abfa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Fitpet</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Fitpet</span>
<span>Fitpet · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0c0d0e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0c0d0e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8c8d8d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0c0d0e; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0c0d0e; color: #f5f5f5;
border: 1px solid #313233; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8d8d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #333435; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0c0d0e; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #313233;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8c8d8d; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8c8d8d; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0c0d0e; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#333435; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #313233; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8c8d8d; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #313233; padding: 18px 40px; color:#8c8d8d;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Flickr (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Flickr (iOS)</span>
<span>Flickr (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0b0b0f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0b0b0f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8c8c8e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a84ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b0b0f; color: #0a84ff;
border: 1px solid #0a84ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0b0b0f; color: #f5f5f5;
border: 1px solid #303034; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8c8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0b1e35; color: #0a84ff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0b0b0f; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #303034;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8c8c8e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8c8c8e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0a84ff; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0b0b0f; color:#0a84ff;
border:1px solid #0a84ff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0b1e35; color:#0a84ff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #303034; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8c8c8e; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #303034; padding: 18px 40px; color:#8c8c8e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Flighty (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Flighty (iOS)</span>
<span>Flighty (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fff0f3; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #fff0f3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fffdfd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fff0f3; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#000000;
border:1px solid #fff0f3; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fffdfd; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Flo (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Flo (iOS)</span>
<span>Flo (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2dd4bf; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2dd4bf; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #1e695f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fbbf24; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2dd4bf; color: #000000;
border: 1px solid #fbbf24; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2dd4bf; color: #111111;
border: 1px solid #29b5a3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #1e695f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4ed1a6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#2dd4bf; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #29b5a3;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#1e695f; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#1e695f; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fbbf24; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2dd4bf; color:#000000;
border:1px solid #fbbf24; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#4ed1a6; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #29b5a3; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#1e695f; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #29b5a3; padding: 18px 40px; color:#1e695f;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Fourdesire</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Fourdesire</span>
<span>Fourdesire · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #090909; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #090909; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.8px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -0.14px; margin: 0; color: #999999; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; letter-spacing: -0.14px; background: #ffffff; color: #000000;
border: none; border-radius: 100px; padding: 10px 15px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; letter-spacing: -0.14px; background: #141414; color: #ffffff;
border: 1px solid #ffffff; border-radius: 100px;
padding: 10px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.3; letter-spacing: -0.15px; background: #141414; color: #ffffff;
border: 1px solid #464646; border-radius: 10px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #999999; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #2b2b2b; color: #ffffff;
border-radius: 100px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#090909; color:#ffffff; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2b2b2b;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.8px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -0.14px; display:flex; gap:28px; color:#999999; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 32px; font-weight: 500; line-height: 1.13; letter-spacing: -1.0px; margin:0; max-width:640px; color:#ffffff; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -0.14px; margin:0; max-width:520px; color:#999999; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; letter-spacing: -0.14px; background:#ffffff; color:#000000;
border:none; border-radius:100px; padding:10px 15px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; letter-spacing: -0.14px; background:#141414; color:#ffffff;
border:1px solid #ffffff; border-radius:100px;
padding:10px 15px; white-space:nowrap; cursor:default;
}
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background:#2b2b2b; color:#ffffff;
border-radius:100px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2b2b2b; border-radius: 100px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.8px; font-size: 16px; margin:0; color:#ffffff; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -0.14px; margin:0; color:#999999; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -0.14px; border-top:1px solid #2b2b2b; padding: 18px 40px; color:#999999;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Framer</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Framer</span>
<span>Framer · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0055ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0055ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87adfa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0055ff; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0055ff; color: #f5f5f5;
border: 1px solid #276ffd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87adfa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0047d6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0055ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #276ffd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87adfa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87adfa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0055ff; color:#000000;
border:1px solid #000000; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0047d6; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #276ffd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87adfa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #276ffd; padding: 18px 40px; color:#87adfa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Framer</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Framer</span>
<span>Framer · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2a62db; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2a62db; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9ab3e9; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2453ba; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2a62db; color: #ffffff;
border: 1px solid #2453ba; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2a62db; color: #f5f5f5;
border: 1px solid #4a7adf; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9ab3e9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2960d6; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#2a62db; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #4a7adf;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#9ab3e9; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#9ab3e9; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2453ba; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2a62db; color:#ffffff;
border:1px solid #2453ba; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2960d6; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #4a7adf; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#9ab3e9; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #4a7adf; padding: 18px 40px; color:#9ab3e9;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">FriendliAI</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© FriendliAI</span>
<span>FriendliAI · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7a29fa; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7a29fa; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #be99f7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f4373d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7a29fa; color: #ffffff;
border: 1px solid #f4373d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7a29fa; color: #f5f5f5;
border: 1px solid #8e4af9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #be99f7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #8e2bdc; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#7a29fa; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #8e4af9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#be99f7; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#be99f7; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f4373d; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#7a29fa; color:#ffffff;
border:1px solid #f4373d; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#8e2bdc; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #8e4af9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#be99f7; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #8e4af9; padding: 18px 40px; color:#be99f7;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Frip</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Frip</span>
<span>Frip · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0093c1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0093c1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87c9de; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #008fc7; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0093c1; color: #000000;
border: 1px solid #008fc7; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0093c1; color: #f5f5f5;
border: 1px solid #27a3c9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87c9de; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0092c2; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0093c1; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27a3c9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87c9de; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87c9de; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#008fc7; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0093c1; color:#000000;
border:1px solid #008fc7; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0092c2; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27a3c9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87c9de; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27a3c9; padding: 18px 40px; color:#87c9de;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Fubon</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Fubon</span>
<span>Fubon · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4af1c; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4af1c; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #775816; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e49b00; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f4af1c; color: #000000;
border: 1px solid #e49b00; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f4af1c; color: #111111;
border: 1px solid #d0961a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #775816; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f1ac18; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f4af1c; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d0961a;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#775816; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#775816; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e49b00; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f4af1c; color:#000000;
border:1px solid #e49b00; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#f1ac18; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d0961a; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#775816; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d0961a; padding: 18px 40px; color:#775816;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Fugle</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Fugle</span>
<span>Fugle · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5537; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5537; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faada0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4dcbcb; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5537; color: #000000;
border: 1px solid #4dcbcb; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5537; color: #f5f5f5;
border: 1px solid #fd6f55; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faada0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e3684f; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff5537; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd6f55;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#faada0; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#faada0; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#4dcbcb; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff5537; color:#000000;
border:1px solid #4dcbcb; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#e3684f; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd6f55; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#faada0; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd6f55; padding: 18px 40px; color:#faada0;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">FunNow</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© FunNow</span>
<span>FunNow · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e21500; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e21500; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ec9087; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e21500; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e21500; color: #f5f5f5;
border: 1px solid #e53927; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ec9087; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #be1200; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#e21500; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #e53927;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#ec9087; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#ec9087; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e21500; color:#000000;
border:1px solid #000000; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#be1200; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #e53927; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#ec9087; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #e53927; padding: 18px 40px; color:#ec9087;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">FuriosaAI</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© FuriosaAI</span>
<span>FuriosaAI · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1f7ccc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1f7ccc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #95bfe3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a62ad; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1f7ccc; color: #000000;
border: 1px solid #0a62ad; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1f7ccc; color: #f5f5f5;
border: 1px solid #418fd3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #95bfe3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1c78c7; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1f7ccc; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #418fd3;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#95bfe3; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#95bfe3; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0a62ad; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1f7ccc; color:#000000;
border:1px solid #0a62ad; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#1c78c7; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #418fd3; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#95bfe3; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #418fd3; padding: 18px 40px; color:#95bfe3;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">GMO Pepabo (Inhouse)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© GMO Pepabo (Inhouse)</span>
<span>GMO Pepabo (Inhouse) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1d70b8; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1d70b8; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #94b9da; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffdd00; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1d70b8; color: #ffdd00;
border: 1px solid #ffdd00; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1d70b8; color: #f5f5f5;
border: 1px solid #4085c2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #94b9da; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #41819b; color: #ffdd00;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1d70b8; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #4085c2;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#94b9da; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#94b9da; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffdd00; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1d70b8; color:#ffdd00;
border:1px solid #ffdd00; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#41819b; color:#ffdd00;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #4085c2; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#94b9da; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #4085c2; padding: 18px 40px; color:#94b9da;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">GOV.UK</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© GOV.UK</span>
<span>GOV.UK · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #d54300; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #d54300; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e7a587; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d54300; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #d54300; color: #f5f5f5;
border: 1px solid #da5f27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e7a587; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dc6129; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#d54300; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #da5f27;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#e7a587; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#e7a587; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#d54300; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#dc6129; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #da5f27; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#e7a587; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #da5f27; padding: 18px 40px; color:#e7a587;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Gangnam Unni</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Gangnam Unni</span>
<span>Gangnam Unni · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #007cc3; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #007cc3;
border: 1px solid #007cc3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00141f; color: #007cc3;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#007cc3; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#007cc3;
border:1px solid #007cc3; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#00141f; color:#007cc3;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Garmin Connect (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Garmin Connect (iOS)</span>
<span>Garmin Connect (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #6c5ce7; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #6c5ce7; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b7b0ef; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #a06cff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #6c5ce7; color: #ffffff;
border: 1px solid #a06cff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #6c5ce7; color: #f5f5f5;
border: 1px solid #8274e9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b7b0ef; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #745feb; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#6c5ce7; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #8274e9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#b7b0ef; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#b7b0ef; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#a06cff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#6c5ce7; color:#ffffff;
border:1px solid #a06cff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#745feb; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #8274e9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#b7b0ef; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #8274e9; padding: 18px 40px; color:#b7b0ef;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Gas (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Gas (iOS)</span>
<span>Gas (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00b7ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00b7ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d9fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #111214; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00b7ff; color: #111214;
border: 1px solid #111214; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00b7ff; color: #000000;
border: 1px solid #27c1fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d9fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #039dd9; color: #111214;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00b7ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27c1fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87d9fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87d9fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#111214; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00b7ff; color:#111214;
border:1px solid #111214; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#039dd9; color:#111214;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27c1fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87d9fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27c1fd; padding: 18px 40px; color:#87d9fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Gaudio Lab</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Gaudio Lab</span>
<span>Gaudio Lab · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #050505; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #050505; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #898989; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #050505; color: #ffffff;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #050505; color: #f5f5f5;
border: 1px solid #2b2b2b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #898989; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #040404; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#050505; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2b2b2b;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#898989; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#898989; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#050505; color:#ffffff;
border:1px solid #000000; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#040404; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2b2b2b; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#898989; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2b2b2b; padding: 18px 40px; color:#898989;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Gaudiy</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Gaudiy</span>
<span>Gaudiy · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fa4065; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fa4065; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f7a4b4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d62952; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fa4065; color: #000000;
border: 1px solid #d62952; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fa4065; color: #f5f5f5;
border: 1px solid #f95d7c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f7a4b4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f43c62; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fa4065; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #f95d7c;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f7a4b4; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f7a4b4; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#d62952; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fa4065; color:#000000;
border:1px solid #d62952; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#f43c62; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #f95d7c; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f7a4b4; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #f95d7c; padding: 18px 40px; color:#f7a4b4;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Genie Music</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Genie Music</span>
<span>Genie Music · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0969da; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0969da; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8bb6e9; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0d1117; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0969da; color: #0d1117;
border: 1px solid #0d1117; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0969da; color: #f5f5f5;
border: 1px solid #2f7fde; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8bb6e9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0a5bbb; color: #0d1117;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0969da; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2f7fde;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8bb6e9; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8bb6e9; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0d1117; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0969da; color:#0d1117;
border:1px solid #0d1117; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0a5bbb; color:#0d1117;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2f7fde; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8bb6e9; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2f7fde; padding: 18px 40px; color:#8bb6e9;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">GitHub</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© GitHub</span>
<span>GitHub · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0d1117; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0d1117; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d8e91; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #161b22; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0d1117; color: #ffffff;
border: 1px solid #161b22; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0d1117; color: #f5f5f5;
border: 1px solid #32353b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8e91; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e1319; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0d1117; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #32353b;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8d8e91; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8d8e91; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#161b22; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0d1117; color:#ffffff;
border:1px solid #161b22; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0e1319; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #32353b; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8d8e91; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #32353b; padding: 18px 40px; color:#8d8e91;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">GitHub (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© GitHub (iOS)</span>
<span>GitHub (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1f75cb; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1f75cb; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #95bbe2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fc6d26; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1f75cb; color: #ffffff;
border: 1px solid #fc6d26; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1f75cb; color: #f5f5f5;
border: 1px solid #4189d2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #95bbe2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4274b1; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1f75cb; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #4189d2;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#95bbe2; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#95bbe2; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fc6d26; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1f75cb; color:#ffffff;
border:1px solid #fc6d26; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#4274b1; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #4189d2; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#95bbe2; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #4189d2; padding: 18px 40px; color:#95bbe2;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">GitLab</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© GitLab</span>
<span>GitLab · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d93025; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #d93025;
border: 1px solid #d93025; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f9dedc; color: #d93025;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#d93025; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#d93025;
border:1px solid #d93025; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#f9dedc; color:#d93025;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Gmail (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Gmail (iOS)</span>
<span>Gmail (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffd200; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffd200; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6809; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #da120d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffd200; color: #da120d;
border: 1px solid #da120d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffd200; color: #111111;
border: 1px solid #d9b303; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6809; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f9b302; color: #da120d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffd200; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9b303;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c6809; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c6809; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#da120d; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffd200; color:#da120d;
border:1px solid #da120d; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#f9b302; color:#da120d;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9b303; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c6809; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9b303; padding: 18px 40px; color:#7c6809;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Gmarket</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Gmarket</span>
<span>Gmarket · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0cd25f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0cd25f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8ce5b2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #05f067; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0cd25f; color: #000000;
border: 1px solid #05f067; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0cd25f; color: #000000;
border: 1px solid #31d877; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8ce5b2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0bd760; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0cd25f; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #31d877;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8ce5b2; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8ce5b2; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#05f067; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0cd25f; color:#000000;
border:1px solid #05f067; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0bd760; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #31d877; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8ce5b2; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #31d877; padding: 18px 40px; color:#8ce5b2;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Gogolook</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Gogolook</span>
<span>Gogolook · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #323237; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #323237; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #080809; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#323237; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #323237; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#080809; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Gogoro</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Gogoro</span>
<span>Gogoro · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #096fc8; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #096fc8; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8bb9e1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #81b0da; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #096fc8; color: #ffffff;
border: 1px solid #81b0da; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #096fc8; color: #f5f5f5;
border: 1px solid #2f84cf; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8bb9e1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1c79cb; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#096fc8; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2f84cf;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8bb9e1; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8bb9e1; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#81b0da; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#096fc8; color:#ffffff;
border:1px solid #81b0da; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#1c79cb; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2f84cf; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8bb9e1; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2f84cf; padding: 18px 40px; color:#8bb9e1;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Goodpatch</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Goodpatch</span>
<span>Goodpatch · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f1ea; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f1ea; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #777673; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #382110; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f4f1ea; color: #382110;
border: 1px solid #382110; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f4f1ea; color: #111111;
border: 1px solid #d0cdc7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777673; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6d0c7; color: #382110;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f4f1ea; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d0cdc7;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#777673; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#777673; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#382110; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f4f1ea; color:#382110;
border:1px solid #382110; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d6d0c7; color:#382110;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d0cdc7; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#777673; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d0cdc7; padding: 18px 40px; color:#777673;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Goodreads (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Goodreads (iOS)</span>
<span>Goodreads (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a73e8; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a73e8; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #92baef; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a73e8; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a73e8; color: #f5f5f5;
border: 1px solid #3d88ea; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #92baef; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2471ea; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1a73e8; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3d88ea;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#92baef; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#92baef; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1a73e8; color:#000000;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2471ea; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3d88ea; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#92baef; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3d88ea; padding: 18px 40px; color:#92baef;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Google</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Google</span>
<span>Google · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a73e8; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a73e8; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #92baef; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d93025; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a73e8; color: #000000;
border: 1px solid #d93025; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a73e8; color: #f5f5f5;
border: 1px solid #3d88ea; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #92baef; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3968c9; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1a73e8; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3d88ea;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#92baef; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#92baef; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#d93025; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1a73e8; color:#000000;
border:1px solid #d93025; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#3968c9; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3d88ea; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#92baef; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3d88ea; padding: 18px 40px; color:#92baef;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Google Calendar (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Google Calendar (iOS)</span>
<span>Google Calendar (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1e1e1e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #1e1e1e;
border: 1px solid #1e1e1e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dbdbdb; color: #1e1e1e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1e1e1e; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#1e1e1e;
border:1px solid #1e1e1e; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#dbdbdb; color:#1e1e1e;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Google Gemini (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Google Gemini (iOS)</span>
<span>Google Gemini (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #4285f4; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #4285f4; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a4c3f5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ea4335; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4285f4; color: #000000;
border: 1px solid #ea4335; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #4285f4; color: #f5f5f5;
border: 1px solid #5f97f4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a4c3f5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5d7ad5; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#4285f4; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #5f97f4;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#a4c3f5; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#a4c3f5; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ea4335; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#4285f4; color:#000000;
border:1px solid #ea4335; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#5d7ad5; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #5f97f4; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#a4c3f5; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #5f97f4; padding: 18px 40px; color:#a4c3f5;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Google Maps (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Google Maps (iOS)</span>
<span>Google Maps (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #121212;
border: 1px solid #121212; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d9d9d9; color: #121212;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#121212; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#121212;
border:1px solid #121212; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d9d9d9; color:#121212;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Grammarly (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Grammarly (iOS)</span>
<span>Grammarly (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00c88c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00c88c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87e1c6; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00dc9a; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00c88c; color: #000000;
border: 1px solid #00dc9a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00c88c; color: #000000;
border: 1px solid #27cf9d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87e1c6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00cb8e; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00c88c; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27cf9d;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87e1c6; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87e1c6; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00dc9a; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00c88c; color:#000000;
border:1px solid #00dc9a; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#00cb8e; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27cf9d; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87e1c6; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27cf9d; padding: 18px 40px; color:#87e1c6;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Greencar</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Greencar</span>
<span>Greencar · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #002d18; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #002d18; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #879b92; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c84600; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #002d18; color: #c84600;
border: 1px solid #c84600; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #002d18; color: #f5f5f5;
border: 1px solid #274d3b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #879b92; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #203114; color: #c84600;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#002d18; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #274d3b;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#879b92; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#879b92; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#c84600; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#002d18; color:#c84600;
border:1px solid #c84600; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#203114; color:#c84600;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #274d3b; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#879b92; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #274d3b; padding: 18px 40px; color:#879b92;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Greenvines</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Greenvines</span>
<span>Greenvines · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1890ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1890ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #92c8fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0f0f0f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1890ff; color: #0f0f0f;
border: 1px solid #0f0f0f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1890ff; color: #f5f5f5;
border: 1px solid #3ba0fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #92c8fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #177bd9; color: #0f0f0f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1890ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3ba0fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#92c8fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#92c8fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0f0f0f; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1890ff; color:#0f0f0f;
border:1px solid #0f0f0f; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#177bd9; color:#0f0f0f;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3ba0fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#92c8fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3ba0fd; padding: 18px 40px; color:#92c8fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Greeting</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Greeting</span>
<span>Greeting · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffde00; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffde00;
border: 1px solid #ffde00; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292400; color: #ffde00;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffde00; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffde00;
border:1px solid #ffde00; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#292400; color:#ffde00;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Grindr (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Grindr (iOS)</span>
<span>Grindr (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eb2b51; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eb2b51; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f09aab; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff3c78; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #eb2b51; color: #000000;
border: 1px solid #ff3c78; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #eb2b51; color: #f5f5f5;
border: 1px solid #ed4b6b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f09aab; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ee2e57; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#eb2b51; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #ed4b6b;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f09aab; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f09aab; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff3c78; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#eb2b51; color:#000000;
border:1px solid #ff3c78; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ee2e57; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #ed4b6b; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f09aab; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #ed4b6b; padding: 18px 40px; color:#f09aab;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Grip</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Grip</span>
<span>Grip · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e7e9ea; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #e7e9ea;
border: 1px solid #e7e9ea; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #252525; color: #e7e9ea;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e7e9ea; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#e7e9ea;
border:1px solid #e7e9ea; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#252525; color:#e7e9ea;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Grok (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Grok (iOS)</span>
<span>Grok (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #121212;
border: 1px solid #121212; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d9d9d9; color: #121212;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#121212; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#121212;
border:1px solid #121212; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d9d9d9; color:#121212;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">GroupMe (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© GroupMe (iOS)</span>
<span>GroupMe (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f63440; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #f63440;
border: 1px solid #f63440; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fedfe0; color: #f63440;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f63440; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#f63440;
border:1px solid #f63440; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fedfe0; color:#f63440;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Grubhub (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Grubhub (iOS)</span>
<span>Grubhub (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0096d6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0096d6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87cae7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0073a8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0096d6; color: #000000;
border: 1px solid #0073a8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0096d6; color: #f5f5f5;
border: 1px solid #27a5db; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87cae7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0090cf; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0096d6; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27a5db;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87cae7; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87cae7; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0073a8; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0096d6; color:#000000;
border:1px solid #0073a8; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0090cf; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27a5db; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87cae7; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27a5db; padding: 18px 40px; color:#87cae7;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">HP</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© HP</span>
<span>HP · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.17; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.38; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.7px; background: #024ad8; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.7px; background: #ffffff; color: #024ad8;
border: 1px solid #024ad8; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.38; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.38; background: #1a1a1a; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dfdfdf;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.17; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.38; display:flex; gap:28px; color:#767676; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 44px; font-weight: 500; line-height: 1.0; margin:0; max-width:640px; color:#1a1a1a; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.38; margin:0; max-width:520px; color:#767676; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.7px; background:#024ad8; color:#ffffff;
border:none; border-radius:4px; padding:12px 24px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.7px; background:#ffffff; color:#024ad8;
border:1px solid #024ad8; border-radius:4px;
padding:12px 24px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.38; background:#1a1a1a; color:#ffffff;
border-radius:8px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dfdfdf; border-radius: 4px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.17; font-size: 16px; margin:0; color:#1a1a1a; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.38; margin:0; color:#767676; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.38; border-top:1px solid #dfdfdf; padding: 18px 40px; color:#767676;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">HP</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© HP</span>
<span>HP · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0065ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0065ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b4fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2962ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0065ff; color: #ffffff;
border: 1px solid #2962ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0065ff; color: #f5f5f5;
border: 1px solid #277cfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b4fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0765ff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0065ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #277cfd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87b4fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87b4fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2962ff; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0065ff; color:#ffffff;
border:1px solid #2962ff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0765ff; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #277cfd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87b4fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #277cfd; padding: 18px 40px; color:#87b4fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Hackle</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Hackle</span>
<span>Hackle · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00ccb4; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00ccb4; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #09655a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #a3ffe8; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00ccb4; color: #000000;
border: 1px solid #a3ffe8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00ccb4; color: #111111;
border: 1px solid #03ae9a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #09655a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1ad4bc; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00ccb4; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #03ae9a;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#09655a; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#09655a; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#a3ffe8; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00ccb4; color:#000000;
border:1px solid #a3ffe8; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#1ad4bc; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #03ae9a; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#09655a; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #03ae9a; padding: 18px 40px; color:#09655a;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Hahow</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Hahow</span>
<span>Hahow · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00a39f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00a39f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d0ce; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #008485; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a39f; color: #000000;
border: 1px solid #008485; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00a39f; color: #f5f5f5;
border: 1px solid #27b0ad; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d0ce; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #009e9b; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00a39f; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27b0ad;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87d0ce; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87d0ce; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#008485; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00a39f; color:#000000;
border:1px solid #008485; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#009e9b; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27b0ad; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87d0ce; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27b0ad; padding: 18px 40px; color:#87d0ce;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Hana Bank</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Hana Bank</span>
<span>Hana Bank · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.18; letter-spacing: -0.4px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.71; margin: 0; color: #b2b6bd; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background: #ffffff; color: #000000;
border: none; border-radius: 8px; padding: 10px 18px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background: #1f232b; color: #ffffff;
border: 1px solid #000000; border-radius: 8px;
padding: 10px 18px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.5; background: #15181e; color: #ffffff;
border: 1px solid #404040; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b2b6bd; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #000000; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #242424;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.18; letter-spacing: -0.4px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.71; display:flex; gap:28px; color:#b2b6bd; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 40px; font-weight: 600; line-height: 1.19; letter-spacing: -1.0px; margin:0; max-width:640px; color:#ffffff; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.71; margin:0; max-width:520px; color:#b2b6bd; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background:#ffffff; color:#000000;
border:none; border-radius:8px; padding:10px 18px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background:#1f232b; color:#ffffff;
border:1px solid #000000; border-radius:8px;
padding:10px 18px; white-space:nowrap; cursor:default;
}
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background:#000000; color:#ffffff;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #242424; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.18; letter-spacing: -0.4px; font-size: 16px; margin:0; color:#ffffff; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.71; margin:0; color:#b2b6bd; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.71; border-top:1px solid #242424; padding: 18px 40px; color:#b2b6bd;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">HashiCorp</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© HashiCorp</span>
<span>HashiCorp · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1060ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1060ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8eb2fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0c56e9; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1060ff; color: #ffffff;
border: 1px solid #0c56e9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1060ff; color: #f5f5f5;
border: 1px solid #3578fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8eb2fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0f5efb; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1060ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3578fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8eb2fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8eb2fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0c56e9; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1060ff; color:#ffffff;
border:1px solid #0c56e9; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0f5efb; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3578fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8eb2fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3578fd; padding: 18px 40px; color:#8eb2fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Hashicorp</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Hashicorp</span>
<span>Hashicorp · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0061ef; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0061ef; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b2f2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff7300; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0061ef; color: #ffffff;
border: 1px solid #ff7300; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0061ef; color: #f5f5f5;
border: 1px solid #2779f0; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b2f2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2964c9; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0061ef; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2779f0;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87b2f2; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87b2f2; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff7300; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0061ef; color:#ffffff;
border:1px solid #ff7300; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2964c9; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2779f0; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87b2f2; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2779f0; padding: 18px 40px; color:#87b2f2;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Headspace</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Headspace</span>
<span>Headspace · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fff7e7; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fff7e7; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7871; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6b35; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fff7e7; color: #ff6b35;
border: 1px solid #ff6b35; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fff7e7; color: #111111;
border: 1px solid #d9d2c5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7871; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ffe1cb; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fff7e7; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d2c5;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7871; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7871; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff6b35; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fff7e7; color:#ff6b35;
border:1px solid #ff6b35; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ffe1cb; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d2c5; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7871; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d2c5; padding: 18px 40px; color:#7c7871;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Headspace (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Headspace (iOS)</span>
<span>Headspace (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2e2e2e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2e2e2e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9b9b9b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7f7f7; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2e2e2e; color: #f7f7f7;
border: 1px solid #f7f7f7; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2e2e2e; color: #f5f5f5;
border: 1px solid #4e4e4e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9b9b9b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4e4e4e; color: #f7f7f7;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#2e2e2e; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #4e4e4e;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#9b9b9b; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#9b9b9b; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f7f7f7; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2e2e2e; color:#f7f7f7;
border:1px solid #f7f7f7; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#4e4e4e; color:#f7f7f7;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #4e4e4e; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#9b9b9b; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #4e4e4e; padding: 18px 40px; color:#9b9b9b;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Heptabase</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Heptabase</span>
<span>Heptabase · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0e1116; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0e1116; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d8e91; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #161b22; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e1116; color: #ffffff;
border: 1px solid #161b22; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0e1116; color: #f5f5f5;
border: 1px solid #33353a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8e91; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0f1318; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0e1116; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #33353a;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8d8e91; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8d8e91; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#161b22; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0e1116; color:#ffffff;
border:1px solid #161b22; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0f1318; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #33353a; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8d8e91; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #33353a; padding: 18px 40px; color:#8d8e91;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Hevy (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Hevy (iOS)</span>
<span>Hevy (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #396eff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #396eff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a0b8fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #396eff; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #396eff; color: #f5f5f5;
border: 1px solid #5784fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a0b8fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #305cd6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#396eff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #5784fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#a0b8fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#a0b8fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#396eff; color:#000000;
border:1px solid #000000; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#305cd6; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #5784fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#a0b8fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #5784fd; padding: 18px 40px; color:#a0b8fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Heydealer</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Heydealer</span>
<span>Heydealer · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a1a1a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a1a1a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #929292; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fdf8f2; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #fdf8f2;
border: 1px solid #fdf8f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a1a1a; color: #f5f5f5;
border: 1px solid #3d3d3d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #929292; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3e3e3d; color: #fdf8f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1a1a1a; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3d3d3d;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#929292; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#929292; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fdf8f2; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1a1a1a; color:#fdf8f2;
border:1px solid #fdf8f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#3e3e3d; color:#fdf8f2;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3d3d3d; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#929292; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3d3d3d; padding: 18px 40px; color:#929292;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Hinge (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Hinge (iOS)</span>
<span>Hinge (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #584de4; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #584de4; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #aea9ed; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4d55b2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #584de4; color: #ffffff;
border: 1px solid #4d55b2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #584de4; color: #f5f5f5;
border: 1px solid #7168e7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aea9ed; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #564edc; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#584de4; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #7168e7;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#aea9ed; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#aea9ed; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#4d55b2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#584de4; color:#ffffff;
border:1px solid #4d55b2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#564edc; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #7168e7; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#aea9ed; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #7168e7; padding: 18px 40px; color:#aea9ed;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Hogangnono</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Hogangnono</span>
<span>Hogangnono · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fa4747; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #fa4747;
border: 1px solid #fa4747; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fee2e2; color: #fa4747;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fa4747; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#fa4747;
border:1px solid #fa4747; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fee2e2; color:#fa4747;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Hopper (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Hopper (iOS)</span>
<span>Hopper (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4800; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4800; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faa787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fcfcfa; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4800; color: #fcfcfa;
border: 1px solid #fcfcfa; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4800; color: #f5f5f5;
border: 1px solid #fd6427; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faa787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff6528; color: #fcfcfa;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff4800; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd6427;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#faa787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#faa787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fcfcfa; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff4800; color:#fcfcfa;
border:1px solid #fcfcfa; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ff6528; color:#fcfcfa;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd6427; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#faa787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd6427; padding: 18px 40px; color:#faa787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">HubSpot</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© HubSpot</span>
<span>HubSpot · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0b0c0f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0b0c0f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8c8c8e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #151619; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b0c0f; color: #ffffff;
border: 1px solid #151619; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0b0c0f; color: #f5f5f5;
border: 1px solid #303134; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8c8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0d0e11; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0b0c0f; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #303134;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8c8c8e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8c8c8e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#151619; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0b0c0f; color:#ffffff;
border:1px solid #151619; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0d0e11; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #303134; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8c8c8e; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #303134; padding: 18px 40px; color:#8c8c8e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Hulu (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Hulu (iOS)</span>
<span>Hulu (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00adf7; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00adf7; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d5f6; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7b61ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00adf7; color: #000000;
border: 1px solid #7b61ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00adf7; color: #000000;
border: 1px solid #27b9f7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d5f6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #14a1f8; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00adf7; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27b9f7;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87d5f6; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87d5f6; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#7b61ff; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00adf7; color:#000000;
border:1px solid #7b61ff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#14a1f8; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27b9f7; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87d5f6; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27b9f7; padding: 18px 40px; color:#87d5f6;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Humanscape</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Humanscape</span>
<span>Humanscape · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00d5ce; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00d5ce; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #096966; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #22d3d6; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00d5ce; color: #000000;
border: 1px solid #22d3d6; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00d5ce; color: #111111;
border: 1px solid #03b6b0; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #096966; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #05d5cf; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00d5ce; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #03b6b0;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#096966; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#096966; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#22d3d6; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00d5ce; color:#000000;
border:1px solid #22d3d6; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#05d5cf; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #03b6b0; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#096966; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #03b6b0; padding: 18px 40px; color:#096966;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Hwahae</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Hwahae</span>
<span>Hwahae · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00dd99; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00dd99; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #096d4e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #18da9e; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00dd99; color: #000000;
border: 1px solid #18da9e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00dd99; color: #111111;
border: 1px solid #03bc83; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #096d4e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #04dd9a; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00dd99; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #03bc83;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#096d4e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#096d4e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#18da9e; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00dd99; color:#000000;
border:1px solid #18da9e; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#04dd9a; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #03bc83; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#096d4e; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #03bc83; padding: 18px 40px; color:#096d4e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Hyperconnect</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Hyperconnect</span>
<span>Hyperconnect · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #002c5f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #002c5f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #879bb2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #007fa8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #002c5f; color: #007fa8;
border: 1px solid #007fa8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #002c5f; color: #f5f5f5;
border: 1px solid #274c77; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #879bb2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00396b; color: #007fa8;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#002c5f; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #274c77;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#879bb2; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#879bb2; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#007fa8; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#002c5f; color:#007fa8;
border:1px solid #007fa8; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#00396b; color:#007fa8;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #274c77; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#879bb2; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #274c77; padding: 18px 40px; color:#879bb2;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Hyundai</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Hyundai</span>
<span>Hyundai · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#292929; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Hyundai Card</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Hyundai Card</span>
<span>Hyundai Card · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #161616;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #161616;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.33; margin: 0; color: #161616; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.29; letter-spacing: 0.16px; margin: 0; color: #525252; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.29; letter-spacing: 0.16px; background: #0f62fe; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.29; letter-spacing: 0.16px; background: #161616; color: #ffffff;
border: 1px solid #0f62fe; border-radius: 0px;
padding: 12px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0.16px; background: #f4f4f4; color: #161616;
border: 1px solid #c5c5c5; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #525252; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dde9ff; color: #0f62fe;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#161616; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dedede;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.33; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.29; letter-spacing: 0.16px; display:flex; gap:28px; color:#525252; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 42px; font-weight: 300; line-height: 1.2; margin:0; max-width:640px; color:#161616; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.29; letter-spacing: 0.16px; margin:0; max-width:520px; color:#525252; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.29; letter-spacing: 0.16px; background:#0f62fe; color:#ffffff;
border:none; border-radius:0px; padding:12px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.29; letter-spacing: 0.16px; background:#161616; color:#ffffff;
border:1px solid #0f62fe; border-radius:0px;
padding:12px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background:#dde9ff; color:#0f62fe;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dedede; border-radius: 0px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.33; font-size: 16px; margin:0; color:#161616; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.29; letter-spacing: 0.16px; margin:0; color:#525252; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.29; letter-spacing: 0.16px; border-top:1px solid #dedede; padding: 18px 40px; color:#525252;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">IBM</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© IBM</span>
<span>IBM · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0f62fe; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0f62fe; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8eb3f9; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0f62fe; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0f62fe; color: #f5f5f5;
border: 1px solid #347afd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8eb3f9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #357bfe; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0f62fe; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #347afd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8eb3f9; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8eb3f9; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0f62fe; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#357bfe; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #347afd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8eb3f9; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #347afd; padding: 18px 40px; color:#8eb3f9;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">IBM</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© IBM</span>
<span>IBM · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a1d23; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a1d23; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #929496; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3464f4; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1d23; color: #3464f4;
border: 1px solid #3464f4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a1d23; color: #f5f5f5;
border: 1px solid #3d4045; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #929496; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1e2844; color: #3464f4;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1a1d23; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3d4045;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#929496; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#929496; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3464f4; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1a1d23; color:#3464f4;
border:1px solid #3464f4; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#1e2844; color:#3464f4;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3d4045; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#929496; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3d4045; padding: 18px 40px; color:#929496;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">IGAWorks</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© IGAWorks</span>
<span>IGAWorks · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #111111; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #111111; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8e8e8e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1d1d1d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #111111; color: #ffffff;
border: 1px solid #1d1d1d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #111111; color: #f5f5f5;
border: 1px solid #353535; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e8e8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #131313; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#111111; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #353535;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8e8e8e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8e8e8e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1d1d1d; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#111111; color:#ffffff;
border:1px solid #1d1d1d; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#131313; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #353535; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8e8e8e; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #353535; padding: 18px 40px; color:#8e8e8e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">IICOMBINED</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© IICOMBINED</span>
<span>IICOMBINED · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00b9ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00b9ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87dafa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #15181e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00b9ff; color: #15181e;
border: 1px solid #15181e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00b9ff; color: #000000;
border: 1px solid #27c3fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87dafa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #039fdb; color: #15181e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00b9ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27c3fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87dafa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87dafa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#15181e; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00b9ff; color:#15181e;
border:1px solid #15181e; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#039fdb; color:#15181e;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27c3fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87dafa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27c3fd; padding: 18px 40px; color:#87dafa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Imweb</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Imweb</span>
<span>Imweb · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00c471; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00c471; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87dfba; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00c471; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00c471; color: #000000;
border: 1px solid #27cc86; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87dfba; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #29cd88; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00c471; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27cc86;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87dfba; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87dfba; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00c471; color:#000000;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#29cd88; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27cc86; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87dfba; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27cc86; padding: 18px 40px; color:#87dfba;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Inflearn</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Inflearn</span>
<span>Inflearn · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #108910; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #108910; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8ec48e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #003d29; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #108910; color: #003d29;
border: 1px solid #003d29; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #108910; color: #f5f5f5;
border: 1px solid #359a35; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8ec48e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0d7d14; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#108910; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #359a35;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8ec48e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8ec48e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#003d29; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#108910; color:#003d29;
border:1px solid #003d29; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0d7d14; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #359a35; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8ec48e; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #359a35; padding: 18px 40px; color:#8ec48e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Instacart</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Instacart</span>
<span>Instacart · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f6f7f8; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f6f7f8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fefefe; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f6f7f8; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#000000;
border:1px solid #f6f7f8; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fefefe; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Instacart (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Instacart (iOS)</span>
<span>Instacart (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #833ab4; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #833ab4; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #c2a1d8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fd1d1d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #833ab4; color: #ffffff;
border: 1px solid #fd1d1d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #833ab4; color: #f5f5f5;
border: 1px solid #9558be; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c2a1d8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #97359c; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#833ab4; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #9558be;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#c2a1d8; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#c2a1d8; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fd1d1d; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#833ab4; color:#ffffff;
border:1px solid #fd1d1d; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#97359c; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #9558be; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#c2a1d8; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #9558be; padding: 18px 40px; color:#c2a1d8;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Instagram (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Instagram (iOS)</span>
<span>Instagram (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #286efa; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #286efa; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #99b8f7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #111111; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #286efa; color: #111111;
border: 1px solid #111111; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #286efa; color: #f5f5f5;
border: 1px solid #4984f9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #99b8f7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #245fd5; color: #111111;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#286efa; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #4984f9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#99b8f7; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#99b8f7; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#111111; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#286efa; color:#111111;
border:1px solid #111111; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#245fd5; color:#111111;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #4984f9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#99b8f7; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #4984f9; padding: 18px 40px; color:#99b8f7;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Intercom</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Intercom</span>
<span>Intercom · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f1ec; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f1ec; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #626260; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; background: #111111; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 18px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; background: #ffffff; color: #111111;
border: 1px solid #111111; border-radius: 8px;
padding: 10px 18px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #111111;
border: 1px solid #bcb9b5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #626260; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #d5d2cd; color: #111111;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f1ec; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d5d2cd;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -0.3px; font-size: 18px; margin:0; }
.navlinks { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; display:flex; gap:28px; color:#626260; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 40px; font-weight: 500; line-height: 1.15; letter-spacing: -0.8px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin:0; max-width:520px; color:#626260; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; background:#111111; color:#ffffff;
border:none; border-radius:8px; padding:10px 18px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; background:#ffffff; color:#111111;
border:1px solid #111111; border-radius:8px;
padding:10px 18px; white-space:nowrap; cursor:default;
}
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background:#d5d2cd; color:#111111;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d5d2cd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -0.3px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin:0; color:#626260; }
footer {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; border-top:1px solid #d5d2cd; padding: 18px 40px; color:#626260;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Intercom</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Intercom</span>
<span>Intercom · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0d333f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0d333f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d9ea3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0d333f; color: #ffffff;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0d333f; color: #f5f5f5;
border: 1px solid #32525c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d9ea3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0b2b35; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0d333f; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #32525c;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8d9ea3; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8d9ea3; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0d333f; color:#ffffff;
border:1px solid #000000; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0b2b35; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #32525c; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8d9ea3; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #32525c; padding: 18px 40px; color:#8d9ea3;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Intuit QuickBooks</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Intuit QuickBooks</span>
<span>Intuit QuickBooks · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00c473; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00c473; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87dfba; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00c473; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00c473; color: #000000;
border: 1px solid #27cc88; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87dfba; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #29cd89; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00c473; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27cc88;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87dfba; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87dfba; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00c473; color:#000000;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#29cd89; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27cc88; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87dfba; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27cc88; padding: 18px 40px; color:#87dfba;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">JANDI</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© JANDI</span>
<span>JANDI · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #c9191d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #c9191d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e19294; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d51b1f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c9191d; color: #ffffff;
border: 1px solid #d51b1f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #c9191d; color: #f5f5f5;
border: 1px solid #d03c40; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e19294; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cb191d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#c9191d; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d03c40;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#e19294; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#e19294; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#d51b1f; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#c9191d; color:#ffffff;
border:1px solid #d51b1f; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#cb191d; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d03c40; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#e19294; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d03c40; padding: 18px 40px; color:#e19294;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">JKOPay</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© JKOPay</span>
<span>JKOPay · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0052cc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0052cc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87ace3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0052cc; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0052cc; color: #f5f5f5;
border: 1px solid #276cd3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87ace3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #296ed4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0052cc; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #276cd3;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87ace3; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87ace3; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0052cc; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#296ed4; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #276cd3; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87ace3; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #276cd3; padding: 18px 40px; color:#87ace3;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Jira (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Jira (iOS)</span>
<span>Jira (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #083ccc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #083ccc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8aa2e3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #012ca2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #083ccc; color: #ffffff;
border: 1px solid #012ca2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #083ccc; color: #f5f5f5;
border: 1px solid #2e5ad3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8aa2e3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0739c5; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#083ccc; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2e5ad3;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8aa2e3; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8aa2e3; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#012ca2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#083ccc; color:#ffffff;
border:1px solid #012ca2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0739c5; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2e5ad3; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8aa2e3; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2e5ad3; padding: 18px 40px; color:#8aa2e3;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">JobKorea</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© JobKorea</span>
<span>JobKorea · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00c362; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00c362; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87deb3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00ff91; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00c362; color: #000000;
border: 1px solid #00ff91; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00c362; color: #000000;
border: 1px solid #27cb7a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87deb3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00cd6a; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00c362; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27cb7a;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87deb3; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87deb3; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00ff91; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00c362; color:#000000;
border:1px solid #00ff91; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#00cd6a; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27cb7a; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87deb3; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27cb7a; padding: 18px 40px; color:#87deb3;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Jobplanet</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Jobplanet</span>
<span>Jobplanet · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00dd6d; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00dd6d; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #096d3a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00dd6d; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00dd6d; color: #111111;
border: 1px solid #03bc5e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #096d3a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00ba5c; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00dd6d; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #03bc5e;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#096d3a; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#096d3a; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00dd6d; color:#000000;
border:1px solid #000000; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#00ba5c; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #03bc5e; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#096d3a; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #03bc5e; padding: 18px 40px; color:#096d3a;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Jumpit</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Jumpit</span>
<span>Jumpit · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0114a7; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0114a7; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8790d2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0114a7; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0114a7; color: #f5f5f5;
border: 1px solid #2838b3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8790d2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0f21b3; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0114a7; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2838b3;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8790d2; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8790d2; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0114a7; color:#5865f2;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0f21b3; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2838b3; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8790d2; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2838b3; padding: 18px 40px; color:#8790d2;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">K bank</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© K bank</span>
<span>K bank · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f4f5f7; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f4f5f7; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfdfe; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f4f5f7; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#000000;
border:1px solid #f4f5f7; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fdfdfe; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">KAYAK (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© KAYAK (iOS)</span>
<span>KAYAK (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffcc00; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffcc00; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6509; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffcc00; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffcc00; color: #111111;
border: 1px solid #d9ae03; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6509; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e4bc27; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffcc00; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9ae03;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c6509; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c6509; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffcc00; color:#5865f2;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#e4bc27; color:#5865f2;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9ae03; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c6509; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9ae03; padding: 18px 40px; color:#7c6509;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">KB Kookmin Bank</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© KB Kookmin Bank</span>
<span>KB Kookmin Bank · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffcc00; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffcc00; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6509; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #614cc2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffcc00; color: #614cc2;
border: 1px solid #614cc2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffcc00; color: #111111;
border: 1px solid #d9ae03; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6509; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e6b81f; color: #614cc2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffcc00; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9ae03;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c6509; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c6509; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#614cc2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffcc00; color:#614cc2;
border:1px solid #614cc2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#e6b81f; color:#614cc2;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9ae03; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c6509; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9ae03; padding: 18px 40px; color:#7c6509;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">KB Pay</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© KB Pay</span>
<span>KB Pay · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00b6e1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00b6e1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d9ec; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #111111; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00b6e1; color: #111111;
border: 1px solid #111111; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00b6e1; color: #000000;
border: 1px solid #27c0e4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d9ec; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #039cc0; color: #111111;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00b6e1; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27c0e4;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87d9ec; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87d9ec; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#111111; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00b6e1; color:#111111;
border:1px solid #111111; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#039cc0; color:#111111;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27c0e4; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87d9ec; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27c0e4; padding: 18px 40px; color:#87d9ec;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">KKBOX</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© KKBOX</span>
<span>KKBOX · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5c00; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5c00; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fab087; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e65300; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5c00; color: #000000;
border: 1px solid #e65300; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5c00; color: #f5f5f5;
border: 1px solid #fd7427; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fab087; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fb5b00; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff5c00; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd7427;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#fab087; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#fab087; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e65300; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff5c00; color:#000000;
border:1px solid #e65300; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fb5b00; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd7427; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#fab087; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd7427; padding: 18px 40px; color:#fab087;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">KKday</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© KKday</span>
<span>KKday · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#292929; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">KRAFTON</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© KRAFTON</span>
<span>KRAFTON · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #256ef4; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #256ef4; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #97b8f5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #256ef4; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #256ef4; color: #f5f5f5;
border: 1px solid #4684f4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #97b8f5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2d6df4; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#256ef4; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #4684f4;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#97b8f5; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#97b8f5; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#256ef4; color:#000000;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2d6df4; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #4684f4; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#97b8f5; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #4684f4; padding: 18px 40px; color:#97b8f5;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">KRDS</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© KRDS</span>
<span>KRDS · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#292929; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">KREAM</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© KREAM</span>
<span>KREAM · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fee500; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fee500; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7009; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fee500; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fee500; color: #111111;
border: 1px solid #d8c303; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7009; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e3d127; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fee500; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d8c303;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7009; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7009; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fee500; color:#5865f2;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#e3d127; color:#5865f2;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d8c303; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7009; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d8c303; padding: 18px 40px; color:#7c7009;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Kakao</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Kakao</span>
<span>Kakao · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#292929; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Kakao Games</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Kakao Games</span>
<span>Kakao Games · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fee500; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fee500; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7009; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2d900; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fee500; color: #000000;
border: 1px solid #f2d900; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fee500; color: #111111;
border: 1px solid #d8c303; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7009; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fce300; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fee500; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d8c303;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7009; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7009; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f2d900; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fee500; color:#000000;
border:1px solid #f2d900; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fce300; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d8c303; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7009; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d8c303; padding: 18px 40px; color:#7c7009;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Kakao T</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Kakao T</span>
<span>Kakao T · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffe300; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffe300; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7009; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffe300; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffe300; color: #111111;
border: 1px solid #d9c103; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7009; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e4cf27; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffe300; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9c103;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7009; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7009; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffe300; color:#5865f2;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#e4cf27; color:#5865f2;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9c103; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7009; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9c103; padding: 18px 40px; color:#7c7009;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">KakaoBank</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© KakaoBank</span>
<span>KakaoBank · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffd618; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffd618; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6a14; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffd618; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffd618; color: #111111;
border: 1px solid #d9b617; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6a14; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6b414; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffd618; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9b617;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c6a14; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c6a14; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffd618; color:#000000;
border:1px solid #000000; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d6b414; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9b617; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c6a14; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9b617; padding: 18px 40px; color:#7c6a14;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">KakaoPage</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© KakaoPage</span>
<span>KakaoPage · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffeb00; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffeb00; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7309; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffeb00; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffeb00; color: #111111;
border: 1px solid #d9c803; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7309; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6c500; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffeb00; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9c803;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7309; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7309; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffeb00; color:#000000;
border:1px solid #000000; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d6c500; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9c803; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7309; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9c803; padding: 18px 40px; color:#7c7309;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">KakaoPay</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© KakaoPay</span>
<span>KakaoPay · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fee500; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fee500; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7009; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3c1e1e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fee500; color: #3c1e1e;
border: 1px solid #3c1e1e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fee500; color: #111111;
border: 1px solid #d8c303; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7009; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dfc505; color: #3c1e1e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fee500; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d8c303;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7009; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7009; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3c1e1e; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fee500; color:#3c1e1e;
border:1px solid #3c1e1e; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#dfc505; color:#3c1e1e;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d8c303; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7009; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d8c303; padding: 18px 40px; color:#7c7009;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">KakaoTalk (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© KakaoTalk (iOS)</span>
<span>KakaoTalk (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff7e36; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff7e36; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c4222; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6f0f; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff7e36; color: #000000;
border: 1px solid #ff6f0f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff7e36; color: #111111;
border: 1px solid #d96d30; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c4222; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff7c30; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff7e36; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d96d30;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c4222; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c4222; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff6f0f; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff7e36; color:#000000;
border:1px solid #ff6f0f; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ff7c30; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d96d30; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c4222; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d96d30; padding: 18px 40px; color:#7c4222;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Karrot</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Karrot</span>
<span>Karrot · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00dc87; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00dc87; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #096c46; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #002d37; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00dc87; color: #002d37;
border: 1px solid #002d37; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00dc87; color: #111111;
border: 1px solid #03bc74; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #096c46; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00c07a; color: #002d37;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00dc87; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #03bc74;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#096c46; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#096c46; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#002d37; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00dc87; color:#002d37;
border:1px solid #002d37; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#00c07a; color:#002d37;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #03bc74; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#096c46; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #03bc74; padding: 18px 40px; color:#096c46;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Kdan Mobile</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Kdan Mobile</span>
<span>Kdan Mobile · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #05141f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #05141f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #899095; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #697278; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #05141f; color: #697278;
border: 1px solid #697278; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #05141f; color: #f5f5f5;
border: 1px solid #2b3841; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #899095; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #15232d; color: #697278;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#05141f; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2b3841;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#899095; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#899095; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#697278; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#05141f; color:#697278;
border:1px solid #697278; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#15232d; color:#697278;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2b3841; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#899095; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2b3841; padding: 18px 40px; color:#899095;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Kia</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Kia</span>
<span>Kia · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0e0e10; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0e0e10; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d8d8e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #53fc18; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e0e10; color: #53fc18;
border: 1px solid #53fc18; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0e0e10; color: #f5f5f5;
border: 1px solid #333335; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8d8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #193411; color: #53fc18;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0e0e10; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #333335;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8d8d8e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8d8d8e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#53fc18; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0e0e10; color:#53fc18;
border:1px solid #53fc18; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#193411; color:#53fc18;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #333335; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8d8d8e; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #333335; padding: 18px 40px; color:#8d8d8e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Kick (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Kick (iOS)</span>
<span>Kick (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00b0f0; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00b0f0; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d6f3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #82bc23; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00b0f0; color: #000000;
border: 1px solid #82bc23; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00b0f0; color: #000000;
border: 1px solid #27bbf1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d6f3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #15b2cf; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00b0f0; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27bbf1;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87d6f3; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87d6f3; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#82bc23; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00b0f0; color:#000000;
border:1px solid #82bc23; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#15b2cf; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27bbf1; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87d6f3; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27bbf1; padding: 18px 40px; color:#87d6f3;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Kik (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Kik (iOS)</span>
<span>Kik (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbf0d9; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbf0d9; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7a756b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fbf0d9; color: #1a1a1a;
border: 1px solid #1a1a1a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fbf0d9; color: #111111;
border: 1px solid #d6ccb9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a756b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d7ceba; color: #1a1a1a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fbf0d9; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d6ccb9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7a756b; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7a756b; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1a1a1a; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fbf0d9; color:#1a1a1a;
border:1px solid #1a1a1a; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d7ceba; color:#1a1a1a;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d6ccb9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7a756b; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d6ccb9; padding: 18px 40px; color:#7a756b;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Kindle (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Kindle (iOS)</span>
<span>Kindle (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fff2f5; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #fff2f5; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fffdfd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fff2f5; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#000000;
border:1px solid #fff2f5; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fffdfd; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Klarna (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Klarna (iOS)</span>
<span>Klarna (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #92fa72; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #92fa72; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #4b7a3d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #92fa72; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #92fa72; color: #111111;
border: 1px solid #7dd562; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #4b7a3d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #89e286; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#92fa72; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #7dd562;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#4b7a3d; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#4b7a3d; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#92fa72; color:#5865f2;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#89e286; color:#5865f2;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #7dd562; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#4b7a3d; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #7dd562; padding: 18px 40px; color:#4b7a3d;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Kmong</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Kmong</span>
<span>Kmong · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2d91ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2d91ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9bc8fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0257d7; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2d91ff; color: #000000;
border: 1px solid #0257d7; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2d91ff; color: #f5f5f5;
border: 1px solid #4da1fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9bc8fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2688f9; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#2d91ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #4da1fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#9bc8fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#9bc8fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0257d7; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2d91ff; color:#000000;
border:1px solid #0257d7; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2688f9; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #4da1fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#9bc8fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #4da1fd; padding: 18px 40px; color:#9bc8fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Korea Credit Data</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Korea Credit Data</span>
<span>Korea Credit Data · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7132f5; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7132f5; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ba9df5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5741d8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7132f5; color: #ffffff;
border: 1px solid #5741d8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7132f5; color: #f5f5f5;
border: 1px solid #8651f5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ba9df5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #6d34f0; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#7132f5; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #8651f5;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#ba9df5; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#ba9df5; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5741d8; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#7132f5; color:#ffffff;
border:1px solid #5741d8; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#6d34f0; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #8651f5; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#ba9df5; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #8651f5; padding: 18px 40px; color:#ba9df5;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Kraken</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Kraken</span>
<span>Kraken · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5741d9; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5741d9; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #aea4e8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7132f5; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5741d9; color: #ffffff;
border: 1px solid #7132f5; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5741d9; color: #f5f5f5;
border: 1px solid #705edd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aea4e8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5b3fdd; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#5741d9; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #705edd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#aea4e8; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#aea4e8; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#7132f5; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5741d9; color:#ffffff;
border:1px solid #7132f5; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#5b3fdd; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #705edd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#aea4e8; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #705edd; padding: 18px 40px; color:#aea4e8;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Kraken</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Kraken</span>
<span>Kraken · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5f0080; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5f0080; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b287c0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5f0080; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5f0080; color: #f5f5f5;
border: 1px solid #772793; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b287c0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #792994; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#5f0080; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #772793;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#b287c0; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#b287c0; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5f0080; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#792994; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #772793; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#b287c0; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #772793; padding: 18px 40px; color:#b287c0;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Kurly</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Kurly</span>
<span>Kurly · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5055b1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5055b1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #abadd6; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4dac27; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5055b1; color: #ffffff;
border: 1px solid #4dac27; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5055b1; color: #f5f5f5;
border: 1px solid #6a6fbc; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #abadd6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #50639b; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#5055b1; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #6a6fbc;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#abadd6; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#abadd6; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#4dac27; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5055b1; color:#ffffff;
border:1px solid #4dac27; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#50639b; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #6a6fbc; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#abadd6; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #6a6fbc; padding: 18px 40px; color:#abadd6;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Kyobo Book Centre</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Kyobo Book Centre</span>
<span>Kyobo Book Centre · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e6007e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e6007e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ee87bf; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e6007e; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e6007e; color: #f5f5f5;
border: 1px solid #e82791; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ee87bf; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cf1091; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#e6007e; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #e82791;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#ee87bf; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#ee87bf; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e6007e; color:#000000;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#cf1091; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #e82791; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#ee87bf; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #e82791; padding: 18px 40px; color:#ee87bf;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">LG Uplus</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© LG Uplus</span>
<span>LG Uplus · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #06c755; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #06c755; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #89e0ad; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #06c755; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #06c755; color: #000000;
border: 1px solid #2cce6f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #89e0ad; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #13b76e; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#06c755; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2cce6f;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#89e0ad; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#89e0ad; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#06c755; color:#000000;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#13b76e; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2cce6f; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#89e0ad; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2cce6f; padding: 18px 40px; color:#89e0ad;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">LINE</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© LINE</span>
<span>LINE · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #8cabd9; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #8cabd9; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #48566b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #8cabd9; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #8cabd9; color: #111111;
border: 1px solid #7892b9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #48566b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #9eb8df; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#8cabd9; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #7892b9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#48566b; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#48566b; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#8cabd9; color:#000000;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#9eb8df; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #7892b9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#48566b; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #7892b9; padding: 18px 40px; color:#48566b;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">LINE (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© LINE (iOS)</span>
<span>LINE (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #28ab6c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #28ab6c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #99d4b7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #002926; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #28ab6c; color: #002926;
border: 1px solid #002926; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #28ab6c; color: #f5f5f5;
border: 1px solid #49b782; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #99d4b7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #229661; color: #002926;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#28ab6c; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #49b782;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#99d4b7; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#99d4b7; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#002926; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#28ab6c; color:#002926;
border:1px solid #002926; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#229661; color:#002926;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #49b782; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#99d4b7; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #49b782; padding: 18px 40px; color:#99d4b7;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Lablup</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Lablup</span>
<span>Lablup · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #816bff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #816bff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #c1b7fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #6e58ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #816bff; color: #000000;
border: 1px solid #6e58ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #816bff; color: #f5f5f5;
border: 1px solid #9481fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c1b7fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #7e68ff; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#816bff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #9481fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#c1b7fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#c1b7fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#6e58ff; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#816bff; color:#000000;
border:1px solid #6e58ff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#7e68ff; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #9481fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#c1b7fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #9481fd; padding: 18px 40px; color:#c1b7fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Laftel</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Laftel</span>
<span>Laftel · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffc000; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffc000; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6009; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #917300; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffc000; color: #917300;
border: 1px solid #917300; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffc000; color: #111111;
border: 1px solid #d9a403; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6009; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #edb400; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffc000; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9a403;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c6009; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c6009; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#917300; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffc000; color:#917300;
border:1px solid #917300; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#edb400; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9a403; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c6009; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9a403; padding: 18px 40px; color:#7c6009;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Lamborghini</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Lamborghini</span>
<span>Lamborghini · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffc000; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffc000;
border: 1px solid #ffc000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #291f00; color: #ffc000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffc000; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffc000;
border:1px solid #ffc000; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#291f00; color:#ffc000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Lamborghini</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Lamborghini</span>
<span>Lamborghini · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0ac290; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0ac290; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8bdec8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0170b9; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0ac290; color: #000000;
border: 1px solid #0170b9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0ac290; color: #000000;
border: 1px solid #30caa0; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8bdec8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #09b597; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0ac290; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #30caa0;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8bdec8; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8bdec8; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0170b9; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0ac290; color:#000000;
border:1px solid #0170b9; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#09b597; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #30caa0; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8bdec8; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #30caa0; padding: 18px 40px; color:#8bdec8;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">LaundryGo</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© LaundryGo</span>
<span>LaundryGo · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #534dff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #534dff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #aca9fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #403ae6; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #534dff; color: #ffffff;
border: 1px solid #403ae6; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #534dff; color: #f5f5f5;
border: 1px solid #6d68fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aca9fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #504afb; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#534dff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #6d68fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#aca9fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#aca9fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#403ae6; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#534dff; color:#ffffff;
border:1px solid #403ae6; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#504afb; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #6d68fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#aca9fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #6d68fd; padding: 18px 40px; color:#aca9fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">LayerX</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© LayerX</span>
<span>LayerX · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffe600; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #ffe600; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fffbd6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffe600; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#000000;
border:1px solid #ffe600; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fffbd6; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Lemon8 (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Lemon8 (iOS)</span>
<span>Lemon8 (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #328af6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #328af6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9dc5f5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #469f68; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #328af6; color: #000000;
border: 1px solid #469f68; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #328af6; color: #f5f5f5;
border: 1px solid #519bf6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9dc5f5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #358ddf; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#328af6; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #519bf6;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#9dc5f5; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#9dc5f5; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#469f68; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#328af6; color:#000000;
border:1px solid #469f68; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#358ddf; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #519bf6; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#9dc5f5; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #519bf6; padding: 18px 40px; color:#9dc5f5;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Lemonbase</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Lemonbase</span>
<span>Lemonbase · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eb0014; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eb0014; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f08790; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5254; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #eb0014; color: #ffffff;
border: 1px solid #ff5254; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #eb0014; color: #f5f5f5;
border: 1px solid #ed2738; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f08790; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ee0d1e; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#eb0014; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #ed2738;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f08790; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f08790; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff5254; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#eb0014; color:#ffffff;
border:1px solid #ff5254; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ee0d1e; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #ed2738; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f08790; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #ed2738; padding: 18px 40px; color:#f08790;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Lezhin Comics</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Lezhin Comics</span>
<span>Lezhin Comics · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #582c83; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #582c83; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ae9bc2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7e57c2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #582c83; color: #ffffff;
border: 1px solid #7e57c2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #582c83; color: #f5f5f5;
border: 1px solid #714c95; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ae9bc2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5e338d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#582c83; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #714c95;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#ae9bc2; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#ae9bc2; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#7e57c2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#582c83; color:#ffffff;
border:1px solid #7e57c2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#5e338d; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #714c95; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#ae9bc2; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #714c95; padding: 18px 40px; color:#ae9bc2;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Life360 (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Life360 (iOS)</span>
<span>Life360 (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff6000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff6000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fab287; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #222222; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6000; color: #222222;
border: 1px solid #222222; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff6000; color: #f5f5f5;
border: 1px solid #fd7827; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fab287; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dc5605; color: #222222;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff6000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd7827;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#fab287; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#fab287; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#222222; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff6000; color:#222222;
border:1px solid #222222; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#dc5605; color:#222222;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd7827; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#fab287; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd7827; padding: 18px 40px; color:#fab287;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">LikeLion</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© LikeLion</span>
<span>LikeLion · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5e6ad2; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5e6ad2; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b1b6e5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5e6ad2; color: #ffffff;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5e6ad2; color: #f5f5f5;
border: 1px solid #7680d8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b1b6e5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5d69d7; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#5e6ad2; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #7680d8;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#b1b6e5; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#b1b6e5; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5e6ad2; color:#ffffff;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#5d69d7; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #7680d8; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#b1b6e5; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #7680d8; padding: 18px 40px; color:#b1b6e5;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Linear</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Linear</span>
<span>Linear · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #010102; color: #f7f8f8;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #010102; color: #f7f8f8;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -0.4px; margin: 0; color: #f7f8f8; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0.4px; margin: 0; color: #d0d6e0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; background: #5e6ad2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 14px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; background: #0f1011; color: #f7f8f8;
border: 1px solid #5e6ad2; border-radius: 8px;
padding: 8px 14px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -0.05px; background: #0f1011; color: #f7f8f8;
border: 1px solid #3e3f40; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #d0d6e0; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; background: #141516; color: #d0d6e0;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#010102; color:#f7f8f8; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #232424;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -0.4px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0.4px; display:flex; gap:28px; color:#d0d6e0; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 40px; font-weight: 600; line-height: 1.15; letter-spacing: -1.0px; margin:0; max-width:640px; color:#f7f8f8; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0.4px; margin:0; max-width:520px; color:#d0d6e0; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; background:#5e6ad2; color:#ffffff;
border:none; border-radius:8px; padding:8px 14px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; background:#0f1011; color:#f7f8f8;
border:1px solid #5e6ad2; border-radius:8px;
padding:8px 14px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; background:#141516; color:#d0d6e0;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #232424; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -0.4px; font-size: 16px; margin:0; color:#f7f8f8; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0.4px; margin:0; color:#d0d6e0; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0.4px; border-top:1px solid #232424; padding: 18px 40px; color:#d0d6e0;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Linear</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Linear</span>
<span>Linear · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #08090a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #08090a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8a8b8b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #08090a; color: #ffffff;
border: 1px solid #121212; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #08090a; color: #f5f5f5;
border: 1px solid #2e2f30; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8b8b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0a0a0b; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#08090a; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2e2f30;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8a8b8b; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8a8b8b; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#121212; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#08090a; color:#ffffff;
border:1px solid #121212; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0a0a0b; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2e2f30; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8a8b8b; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2e2f30; padding: 18px 40px; color:#8a8b8b;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Linear (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Linear (iOS)</span>
<span>Linear (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #197b2e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #197b2e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #92be9b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #14371b; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #197b2e; color: #ffffff;
border: 1px solid #14371b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #197b2e; color: #f5f5f5;
border: 1px solid #3c8f4e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #92be9b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #18702b; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#197b2e; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3c8f4e;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#92be9b; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#92be9b; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#14371b; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#197b2e; color:#ffffff;
border:1px solid #14371b; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#18702b; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3c8f4e; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#92be9b; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3c8f4e; padding: 18px 40px; color:#92be9b;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Liner</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Liner</span>
<span>Liner · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f2ef; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f2ef; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #777675; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f3f2ef; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f3f2ef; color: #111111;
border: 1px solid #cfcecb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777675; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f5f4f2; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f3f2ef; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #cfcecb;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#777675; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#777675; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f3f2ef; color:#000000;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#f5f4f2; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #cfcecb; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#777675; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #cfcecb; padding: 18px 40px; color:#777675;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">LinkedIn (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© LinkedIn (iOS)</span>
<span>LinkedIn (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fff7ec; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fff7ec; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7874; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffe9cc; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fff7ec; color: #000000;
border: 1px solid #ffe9cc; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fff7ec; color: #111111;
border: 1px solid #d9d2c9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7874; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fff5e7; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fff7ec; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d2c9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7874; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7874; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffe9cc; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fff7ec; color:#000000;
border:1px solid #ffe9cc; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fff5e7; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d2c9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7874; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d2c9; padding: 18px 40px; color:#7c7874;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Locket (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Locket (iOS)</span>
<span>Locket (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1868db; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1868db; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #92b6e9; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff613d; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1868db; color: #ffffff;
border: 1px solid #ff613d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1868db; color: #f5f5f5;
border: 1px solid #3b7fdf; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #92b6e9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3d67c2; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1868db; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3b7fdf;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#92b6e9; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#92b6e9; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff613d; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1868db; color:#ffffff;
border:1px solid #ff613d; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#3d67c2; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3b7fdf; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#92b6e9; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3b7fdf; padding: 18px 40px; color:#92b6e9;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Loom</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Loom</span>
<span>Loom · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #333333; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #333333; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #080808; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#333333; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #333333; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#080808; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Lotte ON</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Lotte ON</span>
<span>Lotte ON · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f4ed; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f4ed; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #787774; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1c1c1c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7f4ed; color: #1c1c1c;
border: 1px solid #1c1c1c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f7f4ed; color: #111111;
border: 1px solid #d2d0ca; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #787774; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d4d1cc; color: #1c1c1c;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f4ed; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d2d0ca;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#787774; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#787774; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1c1c1c; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f7f4ed; color:#1c1c1c;
border:1px solid #1c1c1c; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d4d1cc; color:#1c1c1c;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d2d0ca; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#787774; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d2d0ca; padding: 18px 40px; color:#787774;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Lovable</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Lovable</span>
<span>Lovable · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #030303; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #030303; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #030303; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #030303; color: #f5f5f5;
border: 1px solid #2a2a2a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #111329; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#030303; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2a2a2a;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#888888; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#888888; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#030303; color:#5865f2;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#111329; color:#5865f2;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2a2a2a; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#888888; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2a2a2a; padding: 18px 40px; color:#888888;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Lovable</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Lovable</span>
<span>Lovable · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1032cf; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1032cf; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8e9de4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #151515; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1032cf; color: #ffffff;
border: 1px solid #151515; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1032cf; color: #f5f5f5;
border: 1px solid #3551d5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e9de4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #112db1; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1032cf; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3551d5;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8e9de4; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8e9de4; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#151515; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1032cf; color:#ffffff;
border:1px solid #151515; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#112db1; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3551d5; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8e9de4; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3551d5; padding: 18px 40px; color:#8e9de4;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Lunit</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Lunit</span>
<span>Lunit · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff00bf; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff00bf; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fa87dd; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #11111f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff00bf; color: #11111f;
border: 1px solid #11111f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff00bf; color: #f5f5f5;
border: 1px solid #fd27c8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fa87dd; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d903a5; color: #11111f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff00bf; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd27c8;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#fa87dd; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#fa87dd; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#11111f; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff00bf; color:#11111f;
border:1px solid #11111f; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d903a5; color:#11111f;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd27c8; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#fa87dd; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd27c8; padding: 18px 40px; color:#fa87dd;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Lyft (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Lyft (iOS)</span>
<span>Lyft (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #503396; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #503396; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ab9eca; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #503396; color: #ffffff;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #503396; color: #f5f5f5;
border: 1px solid #6a52a5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ab9eca; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #513ba5; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#503396; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #6a52a5;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#ab9eca; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#ab9eca; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#503396; color:#ffffff;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#513ba5; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #6a52a5; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#ab9eca; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #6a52a5; padding: 18px 40px; color:#ab9eca;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">MEGABOX</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© MEGABOX</span>
<span>MEGABOX · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#292929; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">MIXI</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© MIXI</span>
<span>MIXI · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff367c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff367c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fa9fbf; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0d0d12; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff367c; color: #0d0d12;
border: 1px solid #0d0d12; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff367c; color: #f5f5f5;
border: 1px solid #fd558f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fa9fbf; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d82f6b; color: #0d0d12;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff367c; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd558f;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#fa9fbf; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#fa9fbf; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0d0d12; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff367c; color:#0d0d12;
border:1px solid #0d0d12; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d82f6b; color:#0d0d12;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd558f; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#fa9fbf; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd558f; padding: 18px 40px; color:#fa9fbf;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">MOZE</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© MOZE</span>
<span>MOZE · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7f0019; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7f0019; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #c08792; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #333333; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7f0019; color: #ffffff;
border: 1px solid #333333; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7f0019; color: #f5f5f5;
border: 1px solid #92273c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c08792; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #73081d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#7f0019; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #92273c;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#c08792; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#c08792; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#333333; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#7f0019; color:#ffffff;
border:1px solid #333333; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#73081d; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #92273c; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#c08792; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #92273c; padding: 18px 40px; color:#c08792;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">MUJI</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© MUJI</span>
<span>MUJI · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #d00000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #d00000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e48787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1f1f2c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d00000; color: #1f1f2c;
border: 1px solid #1f1f2c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #d00000; color: #f5f5f5;
border: 1px solid #d62727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e48787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #b40507; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#d00000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d62727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#e48787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#e48787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1f1f2c; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#d00000; color:#1f1f2c;
border:1px solid #1f1f2c; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#b40507; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d62727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#e48787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d62727; padding: 18px 40px; color:#e48787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">MUSTIT</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© MUSTIT</span>
<span>MUSTIT · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ee5457; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ee5457; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f2adae; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ce4234; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ee5457; color: #000000;
border: 1px solid #ce4234; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ee5457; color: #f5f5f5;
border: 1px solid #ef6e70; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f2adae; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e95151; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ee5457; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #ef6e70;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f2adae; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f2adae; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ce4234; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ee5457; color:#000000;
border:1px solid #ce4234; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#e95151; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #ef6e70; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f2adae; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #ef6e70; padding: 18px 40px; color:#f2adae;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">MaiCoin / MAX</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© MaiCoin / MAX</span>
<span>MaiCoin / MAX · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffe01b; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffe01b; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6e16; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #231e15; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffe01b; color: #231e15;
border: 1px solid #231e15; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffe01b; color: #111111;
border: 1px solid #d9bf19; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6e16; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dcc11a; color: #231e15;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffe01b; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9bf19;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c6e16; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c6e16; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#231e15; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffe01b; color:#231e15;
border:1px solid #231e15; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#dcc11a; color:#231e15;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9bf19; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c6e16; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9bf19; padding: 18px 40px; color:#7c6e16;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Mailchimp</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Mailchimp</span>
<span>Mailchimp · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2b2b3b; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2b2b3b; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9a9aa1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2b2b3b; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2b2b3b; color: #f5f5f5;
border: 1px solid #4b4b59; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a9aa1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4d4d5a; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#2b2b3b; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #4b4b59;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#9a9aa1; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#9a9aa1; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2b2b3b; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#4d4d5a; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #4b4b59; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#9a9aa1; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #4b4b59; padding: 18px 40px; color:#9a9aa1;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">MakinaRocks</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© MakinaRocks</span>
<span>MakinaRocks · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #16264a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #16264a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9198a8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1c1c1c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #16264a; color: #ffffff;
border: 1px solid #1c1c1c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #16264a; color: #f5f5f5;
border: 1px solid #3a4765; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9198a8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #172443; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#16264a; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3a4765;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#9198a8; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#9198a8; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1c1c1c; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#16264a; color:#ffffff;
border:1px solid #1c1c1c; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#172443; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3a4765; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#9198a8; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3a4765; padding: 18px 40px; color:#9198a8;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Marriott Bonvoy (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Marriott Bonvoy (iOS)</span>
<span>Marriott Bonvoy (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f0ee; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f0ee; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #777574; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #141413; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f3f0ee; color: #141413;
border: 1px solid #141413; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f3f0ee; color: #111111;
border: 1px solid #cfcccb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777574; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cfcdcb; color: #141413;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f3f0ee; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #cfcccb;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#777574; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#777574; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#141413; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f3f0ee; color:#141413;
border:1px solid #141413; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#cfcdcb; color:#141413;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #cfcccb; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#777574; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #cfcccb; padding: 18px 40px; color:#777574;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Mastercard</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Mastercard</span>
<span>Mastercard · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eb001b; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eb001b; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f08793; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #141413; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #eb001b; color: #141413;
border: 1px solid #141413; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #eb001b; color: #f5f5f5;
border: 1px solid #ed273e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f08793; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #c9031a; color: #141413;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#eb001b; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #ed273e;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f08793; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f08793; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#141413; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#eb001b; color:#141413;
border:1px solid #141413; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#c9031a; color:#141413;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #ed273e; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f08793; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #ed273e; padding: 18px 40px; color:#f08793;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Mastercard</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Mastercard</span>
<span>Mastercard · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6d6d6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#000000;
border:1px solid #000000; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d6d6d6; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Mastodon (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Mastodon (iOS)</span>
<span>Mastodon (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e92434; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e92434; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f0979e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f0203e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e92434; color: #000000;
border: 1px solid #f0203e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e92434; color: #f5f5f5;
border: 1px solid #eb4553; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f0979e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ea2336; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#e92434; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #eb4553;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f0979e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f0979e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f0203e; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e92434; color:#000000;
border:1px solid #f0203e; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ea2336; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #eb4553; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f0979e; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #eb4553; padding: 18px 40px; color:#f0979e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Match (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Match (iOS)</span>
<span>Match (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #12053a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #12053a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8f89a1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1b0b4d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #12053a; color: #ffffff;
border: 1px solid #1b0b4d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #12053a; color: #f5f5f5;
border: 1px solid #362b58; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8f89a1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #13063d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#12053a; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #362b58;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8f89a1; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8f89a1; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1b0b4d; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#12053a; color:#ffffff;
border:1px solid #1b0b4d; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#13063d; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #362b58; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8f89a1; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #362b58; padding: 18px 40px; color:#8f89a1;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Max (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Max (iOS)</span>
<span>Max (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffc72c; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffc72c; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c631d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #da291c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffc72c; color: #da291c;
border: 1px solid #da291c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffc72c; color: #111111;
border: 1px solid #d9aa28; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c631d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f9ae29; color: #da291c;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffc72c; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9aa28;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c631d; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c631d; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#da291c; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffc72c; color:#da291c;
border:1px solid #da291c; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#f9ae29; color:#da291c;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9aa28; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c631d; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9aa28; padding: 18px 40px; color:#7c631d;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">McDonald's (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© McDonald's (iOS)</span>
<span>McDonald's (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0066ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0066ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b5fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b7aff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0066ff; color: #ffffff;
border: 1px solid #0b7aff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0066ff; color: #f5f5f5;
border: 1px solid #277dfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b5fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0269ff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0066ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #277dfd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87b5fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87b5fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0b7aff; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0066ff; color:#ffffff;
border:1px solid #0b7aff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0269ff; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #277dfd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87b5fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #277dfd; padding: 18px 40px; color:#87b5fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">MediBloc (Dr.Palette)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© MediBloc (Dr.Palette)</span>
<span>MediBloc (Dr.Palette) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffc300; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffc300; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6109; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffd100; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffc300; color: #000000;
border: 1px solid #ffd100; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffc300; color: #111111;
border: 1px solid #d9a703; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6109; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ffc500; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffc300; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9a703;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c6109; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c6109; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffd100; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffc300; color:#000000;
border:1px solid #ffd100; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ffc500; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9a703; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c6109; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9a703; padding: 18px 40px; color:#7c6109;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Meituan</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Meituan</span>
<span>Meituan · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00cd3c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00cd3c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87e3a2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00b523; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00cd3c; color: #000000;
border: 1px solid #00b523; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00cd3c; color: #000000;
border: 1px solid #27d35a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87e3a2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00c938; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00cd3c; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27d35a;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87e3a2; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87e3a2; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00b523; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00cd3c; color:#000000;
border:1px solid #00b523; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#00c938; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27d35a; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87e3a2; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27d35a; padding: 18px 40px; color:#87e3a2;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Melon</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Melon</span>
<span>Melon · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5356ee; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5356ee; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #acadf2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5356ee; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5356ee; color: #f5f5f5;
border: 1px solid #6d6fef; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #acadf2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #6f71f1; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#5356ee; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #6d6fef;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#acadf2; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#acadf2; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5356ee; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#6f71f1; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #6d6fef; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#acadf2; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #6d6fef; padding: 18px 40px; color:#acadf2;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Mercari</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Mercari</span>
<span>Mercari · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5266eb; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5266eb; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #acb5f0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4354c8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5266eb; color: #ffffff;
border: 1px solid #4354c8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5266eb; color: #f5f5f5;
border: 1px solid #6c7ded; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #acb5f0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5063e5; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#5266eb; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #6c7ded;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#acb5f0; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#acb5f0; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#4354c8; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5266eb; color:#ffffff;
border:1px solid #4354c8; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#5063e5; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #6c7ded; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#acb5f0; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #6c7ded; padding: 18px 40px; color:#acb5f0;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Mercury</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Mercury</span>
<span>Mercury · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a7cff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a7cff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8bbffa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #9d4edd; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a7cff; color: #000000;
border: 1px solid #9d4edd; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a7cff; color: #f5f5f5;
border: 1px solid #308ffd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8bbffa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2275fa; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0a7cff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #308ffd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8bbffa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8bbffa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#9d4edd; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0a7cff; color:#000000;
border:1px solid #9d4edd; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2275fa; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #308ffd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8bbffa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #308ffd; padding: 18px 40px; color:#8bbffa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Messenger (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Messenger (iOS)</span>
<span>Messenger (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: -0.14px; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: -0.14px; background: #000000; color: #ffffff;
border: none; border-radius: 100px; padding: 14px 30px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: -0.14px; background: transparent; color: #0a1317;
border: 1px solid #0064e0; border-radius: 100px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -0.16px; background: #ffffff; color: #1c1e21;
border: 1px solid #bfbfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.33; background: #f7b928; color: #0a1317;
border-radius: 100px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dbdbdb;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: -0.14px; display:flex; gap:28px; color:#666666; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 36px; font-weight: 500; line-height: 1.28; margin:0; max-width:640px; color:#000000; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: -0.14px; margin:0; max-width:520px; color:#666666; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: -0.14px; background:#000000; color:#ffffff;
border:none; border-radius:100px; padding:14px 30px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: -0.14px; background:transparent; color:#0a1317;
border:1px solid #0064e0; border-radius:100px;
padding:12px 28px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.33; background:#f7b928; color:#0a1317;
border-radius:100px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dbdbdb; border-radius: 100px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; font-size: 16px; margin:0; color:#000000; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: -0.14px; margin:0; color:#666666; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: -0.14px; border-top:1px solid #dbdbdb; padding: 18px 40px; color:#666666;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Meta</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Meta</span>
<span>Meta · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0064e0; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0064e0; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b4ec; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0082fb; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0064e0; color: #ffffff;
border: 1px solid #0082fb; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0064e0; color: #f5f5f5;
border: 1px solid #277be3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b4ec; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0069e4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0064e0; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #277be3;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87b4ec; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87b4ec; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0082fb; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0064e0; color:#ffffff;
border:1px solid #0082fb; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0069e4; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #277be3; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87b4ec; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #277be3; padding: 18px 40px; color:#87b4ec;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Meta</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Meta</span>
<span>Meta · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0078d4; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0078d4; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bde6; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #091f2c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0078d4; color: #091f2c;
border: 1px solid #091f2c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0078d4; color: #f5f5f5;
border: 1px solid #278cd9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bde6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #016ab9; color: #091f2c;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0078d4; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #278cd9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87bde6; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87bde6; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#091f2c; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0078d4; color:#091f2c;
border:1px solid #091f2c; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#016ab9; color:#091f2c;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #278cd9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87bde6; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #278cd9; padding: 18px 40px; color:#87bde6;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Microsoft</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Microsoft</span>
<span>Microsoft · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #202020; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #202020;
border: 1px solid #202020; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dbdbdb; color: #202020;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#202020; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#202020;
border:1px solid #202020; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#dbdbdb; color:#202020;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Microsoft Copilot (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Microsoft Copilot (iOS)</span>
<span>Microsoft Copilot (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #787878; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f5f5f5; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f5f5f5; color: #111111;
border: 1px solid #d1d1d1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #787878; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f7f7f7; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f5f5; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d1d1d1;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#787878; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#787878; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f5f5f5; color:#000000;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#f7f7f7; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d1d1d1; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#787878; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d1d1d1; padding: 18px 40px; color:#787878;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Microsoft Teams (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Microsoft Teams (iOS)</span>
<span>Microsoft Teams (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e0e0e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #0e0e0e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #020202; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0e0e0e; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #0e0e0e; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#020202; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Midjourney (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Midjourney (iOS)</span>
<span>Midjourney (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00b29d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00b29d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d7cd; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #cc3366; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00b29d; color: #000000;
border: 1px solid #cc3366; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00b29d; color: #000000;
border: 1px solid #27bdab; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d7cd; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #219e94; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00b29d; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27bdab;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87d7cd; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87d7cd; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#cc3366; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00b29d; color:#000000;
border:1px solid #cc3366; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#219e94; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27bdab; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87d7cd; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27bdab; padding: 18px 40px; color:#87d7cd;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Milddang (I Hate Flying Bugs)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Milddang (I Hate Flying Bugs)</span>
<span>Milddang (I Hate Flying Bugs) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #242424; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #242424; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #979797; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #242424; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #242424; color: #f5f5f5;
border: 1px solid #454545; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #979797; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #474747; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#242424; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #454545;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#979797; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#979797; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#242424; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#474747; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #454545; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#979797; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #454545; padding: 18px 40px; color:#979797;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Millie</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Millie</span>
<span>Millie · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e1027; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#5865f2;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0e1027; color:#5865f2;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">MiniMax</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© MiniMax</span>
<span>MiniMax · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0a0a0a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0a0a0a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #0a0a0a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #a8aab2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; background: #0a0a0a; color: #ffffff;
border: none; border-radius: 9999px; padding: 11px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; background: transparent; color: #0a0a0a;
border: 1px solid #0a0a0a; border-radius: 9999px;
padding: 11px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #0a0a0a;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a8aab2; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.5; background: #e8ffea; color: #1ba673;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0a0a0a; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dddddd;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; display:flex; gap:28px; color:#a8aab2; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 40px; font-weight: 600; line-height: 1.2; letter-spacing: -1px; margin:0; max-width:640px; color:#0a0a0a; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin:0; max-width:520px; color:#a8aab2; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; background:#0a0a0a; color:#ffffff;
border:none; border-radius:9999px; padding:11px 24px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; background:transparent; color:#0a0a0a;
border:1px solid #0a0a0a; border-radius:9999px;
padding:11px 24px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.5; background:#e8ffea; color:#1ba673;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dddddd; border-radius: 12px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; font-size: 16px; margin:0; color:#0a0a0a; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin:0; color:#a8aab2; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; border-top:1px solid #dddddd; padding: 18px 40px; color:#a8aab2;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Minimax</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Minimax</span>
<span>Minimax · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0a0a0a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0a0a0a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #0a0a0a; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #a8a8aa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background: #0a0a0a; color: #ffffff;
border: none; border-radius: 9999px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background: transparent; color: #0a0a0a;
border: 1px solid #0a0a0a; border-radius: 9999px;
padding: 10px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #0a0a0a;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a8a8aa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; background: #00d4a4; color: #0a0a0a;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0a0a0a; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dddddd;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; font-size: 18px; margin:0; }
.navlinks { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#a8a8aa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 36px; font-weight: 600; line-height: 1.2; letter-spacing: -0.5px; margin:0; max-width:640px; color:#0a0a0a; }
.hero p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#a8a8aa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background:#0a0a0a; color:#ffffff;
border:none; border-radius:9999px; padding:10px 20px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background:transparent; color:#0a0a0a;
border:1px solid #0a0a0a; border-radius:9999px;
padding:10px 20px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; background:#00d4a4; color:#0a0a0a;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dddddd; border-radius: 12px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; font-size: 16px; margin:0; color:#0a0a0a; }
.feature-card p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.4; margin:0; color:#a8a8aa; }
footer {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.4; border-top:1px solid #dddddd; padding: 18px 40px; color:#a8a8aa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Mintlify</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Mintlify</span>
<span>Mintlify · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0d9373; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0d9373; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8dc9ba; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0d0d0d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0d9373; color: #0d0d0d;
border: 1px solid #0d0d0d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0d9373; color: #f5f5f5;
border: 1px solid #32a388; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8dc9ba; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0d7e63; color: #0d0d0d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0d9373; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #32a388;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8dc9ba; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8dc9ba; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0d0d0d; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0d9373; color:#0d0d0d;
border:1px solid #0d0d0d; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0d7e63; color:#0d0d0d;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #32a388; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8dc9ba; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #32a388; padding: 18px 40px; color:#8dc9ba;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Mintlify</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Mintlify</span>
<span>Mintlify · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #21afbf; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #21afbf; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #96d6dd; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1c95a2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #21afbf; color: #000000;
border: 1px solid #1c95a2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #21afbf; color: #000000;
border: 1px solid #43bac8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #96d6dd; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #20abba; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#21afbf; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #43bac8;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#96d6dd; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#96d6dd; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1c95a2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#21afbf; color:#000000;
border:1px solid #1c95a2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#20abba; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #43bac8; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#96d6dd; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #43bac8; padding: 18px 40px; color:#96d6dd;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">MiriCanvas</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© MiriCanvas</span>
<span>MiriCanvas · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #fde0f0;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #fde0f0;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #fde0f0; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #a5a8b5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background: #1c1c1e; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background: transparent; color: #1c1c1e;
border: 1px solid #1c1c1e; border-radius: 9999px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1c1c1e;
border: 1px solid #fef7fb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a5a8b5; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; background: #ffd02f; color: #1c1c1e;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#fde0f0; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fffbfd;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; display:flex; gap:28px; color:#a5a8b5; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 36px; font-weight: 500; line-height: 1.2; letter-spacing: -0.5px; margin:0; max-width:640px; color:#fde0f0; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin:0; max-width:520px; color:#a5a8b5; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background:#1c1c1e; color:#ffffff;
border:none; border-radius:9999px; padding:12px 24px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background:transparent; color:#1c1c1e;
border:1px solid #1c1c1e; border-radius:9999px;
padding:12px 24px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; background:#ffd02f; color:#1c1c1e;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fffbfd; border-radius: 12px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; font-size: 16px; margin:0; color:#fde0f0; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin:0; color:#a5a8b5; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; border-top:1px solid #fffbfd; padding: 18px 40px; color:#a5a8b5;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Miro</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Miro</span>
<span>Miro · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fde050; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fde050; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7b6e2d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3859ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fde050; color: #3859ff;
border: 1px solid #3859ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fde050; color: #111111;
border: 1px solid #d7bf46; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b6e2d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ddca6c; color: #3859ff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fde050; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d7bf46;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7b6e2d; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7b6e2d; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3859ff; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fde050; color:#3859ff;
border:1px solid #3859ff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ddca6c; color:#3859ff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d7bf46; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7b6e2d; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d7bf46; padding: 18px 40px; color:#7b6e2d;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Miro</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Miro</span>
<span>Miro · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f7; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f7; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #787878; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #202024; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f5f5f7; color: #202024;
border: 1px solid #202024; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f5f5f7; color: #111111;
border: 1px solid #d1d1d2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #787878; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d3d3d5; color: #202024;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f5f7; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d1d1d2;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#787878; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#787878; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#202024; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f5f5f7; color:#202024;
border:1px solid #202024; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d3d3d5; color:#202024;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d1d1d2; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#787878; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d1d1d2; padding: 18px 40px; color:#787878;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Miro (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Miro (iOS)</span>
<span>Miro (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1f1f1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1f1f1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #1f1f1f; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #a8a8a8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background: #fa520f; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background: transparent; color: #1f1f1f;
border: 1px solid #fa520f; border-radius: 8px;
padding: 10px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #1f1f1f;
border: 1px solid #c7c7c7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a8a8a8; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; background: #fa520f; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1f1f1f; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #e0e0e0;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; display:flex; gap:28px; color:#a8a8a8; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 36px; font-weight: 500; line-height: 1.2; letter-spacing: -0.5px; margin:0; max-width:640px; color:#1f1f1f; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin:0; max-width:520px; color:#a8a8a8; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background:#fa520f; color:#ffffff;
border:none; border-radius:8px; padding:10px 20px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background:transparent; color:#1f1f1f;
border:1px solid #fa520f; border-radius:8px;
padding:10px 20px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; background:#fa520f; color:#ffffff;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #e0e0e0; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; font-size: 16px; margin:0; color:#1f1f1f; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin:0; color:#a8a8a8; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; border-top:1px solid #e0e0e0; padding: 18px 40px; color:#a8a8a8;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Mistral AI</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Mistral AI</span>
<span>Mistral AI · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e4e3de; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #e4e3de;
border: 1px solid #e4e3de; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #242424; color: #e4e3de;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e4e3de; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#e4e3de;
border:1px solid #e4e3de; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#242424; color:#e4e3de;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Mistral AI</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Mistral AI</span>
<span>Mistral AI · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fed05f; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fed05f; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6734; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffc533; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fed05f; color: #000000;
border: 1px solid #ffc533; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fed05f; color: #111111;
border: 1px solid #d8b153; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6734; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fece58; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fed05f; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d8b153;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c6734; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c6734; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffc533; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fed05f; color:#000000;
border:1px solid #ffc533; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fece58; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d8b153; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c6734; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d8b153; padding: 18px 40px; color:#7c6734;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Modusign</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Modusign</span>
<span>Modusign · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0082ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0082ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87c1fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #007bff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0082ff; color: #000000;
border: 1px solid #007bff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0082ff; color: #f5f5f5;
border: 1px solid #2794fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87c1fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0081ff; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0082ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2794fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87c1fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87c1fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#007bff; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0082ff; color:#000000;
border:1px solid #007bff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0081ff; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2794fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87c1fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2794fd; padding: 18px 40px; color:#87c1fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Moin</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Moin</span>
<span>Moin · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3b7de9; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3b7de9; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a1bff0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0054ac; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3b7de9; color: #000000;
border: 1px solid #0054ac; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3b7de9; color: #f5f5f5;
border: 1px solid #5990eb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a1bff0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3276df; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#3b7de9; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #5990eb;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#a1bff0; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#a1bff0; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0054ac; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3b7de9; color:#000000;
border:1px solid #0054ac; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#3276df; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #5990eb; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#a1bff0; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #5990eb; padding: 18px 40px; color:#a1bff0;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Money Forward</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Money Forward</span>
<span>Money Forward · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #f06bb8;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #f06bb8;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.35; margin: 0; color: #f06bb8; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #a8b3bc; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: #00ed64; color: #001e2b;
border: none; border-radius: 9999px; padding: 10px 22px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: transparent; color: #001e2b;
border: 1px solid #00ed64; border-radius: 9999px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #001e2b;
border: 1px solid #fbdaed; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a8b3bc; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; background: #00ed64; color: #001e2b;
border-radius: 6px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#f06bb8; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fdeaf5;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.35; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; display:flex; gap:28px; color:#a8b3bc; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 36px; font-weight: 500; line-height: 1.25; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f06bb8; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin:0; max-width:520px; color:#a8b3bc; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background:#00ed64; color:#001e2b;
border:none; border-radius:9999px; padding:10px 22px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background:transparent; color:#001e2b;
border:1px solid #00ed64; border-radius:9999px;
padding:10px 22px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; background:#00ed64; color:#001e2b;
border-radius:6px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fdeaf5; border-radius: 12px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.35; font-size: 16px; margin:0; color:#f06bb8; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin:0; color:#a8b3bc; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; border-top:1px solid #fdeaf5; padding: 18px 40px; color:#a8b3bc;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">MongoDB</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© MongoDB</span>
<span>MongoDB · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00ed64; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00ed64; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #097436; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #001e2b; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00ed64; color: #001e2b;
border: 1px solid #001e2b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00ed64; color: #111111;
border: 1px solid #03ca57; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #097436; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00cc5b; color: #001e2b;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00ed64; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #03ca57;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#097436; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#097436; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#001e2b; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00ed64; color:#001e2b;
border:1px solid #001e2b; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#00cc5b; color:#001e2b;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #03ca57; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#097436; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #03ca57; padding: 18px 40px; color:#097436;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">MongoDB</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© MongoDB</span>
<span>MongoDB · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4f40; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4f40; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faaaa4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #091723; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4f40; color: #091723;
border: 1px solid #091723; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4f40; color: #f5f5f5;
border: 1px solid #fd6a5d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faaaa4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d8463b; color: #091723;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff4f40; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd6a5d;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#faaaa4; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#faaaa4; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#091723; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff4f40; color:#091723;
border:1px solid #091723; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d8463b; color:#091723;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd6a5d; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#faaaa4; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd6a5d; padding: 18px 40px; color:#faaaa4;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Monzo</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Monzo</span>
<span>Monzo · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff3464; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff3464; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fa9eb4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #14233c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff3464; color: #14233c;
border: 1px solid #14233c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff3464; color: #f5f5f5;
border: 1px solid #fd537b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fa9eb4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d9315e; color: #14233c;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff3464; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd537b;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#fa9eb4; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#fa9eb4; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#14233c; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff3464; color:#14233c;
border:1px solid #14233c; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d9315e; color:#14233c;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd537b; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#fa9eb4; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd537b; padding: 18px 40px; color:#fa9eb4;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Monzo (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Monzo (iOS)</span>
<span>Monzo (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5700; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5700; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faae87; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff793e; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5700; color: #000000;
border: 1px solid #ff793e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5700; color: #f5f5f5;
border: 1px solid #fd7027; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faae87; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff5c0a; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff5700; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd7027;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#faae87; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#faae87; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff793e; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff5700; color:#000000;
border:1px solid #ff793e; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ff5c0a; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd7027; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#faae87; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd7027; padding: 18px 40px; color:#faae87;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Moreh</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Moreh</span>
<span>Moreh · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#292929; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Musinsa</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Musinsa</span>
<span>Musinsa · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #005daa; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #005daa; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b1d3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0072ce; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #005daa; color: #ffffff;
border: 1px solid #0072ce; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #005daa; color: #f5f5f5;
border: 1px solid #2775b6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b1d3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0060b0; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#005daa; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2775b6;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87b1d3; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87b1d3; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0072ce; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#005daa; color:#ffffff;
border:1px solid #0072ce; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0060b0; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2775b6; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87b1d3; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2775b6; padding: 18px 40px; color:#87b1d3;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">MyFitnessPal (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© MyFitnessPal (iOS)</span>
<span>MyFitnessPal (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2b96ed; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2b96ed; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9acaf1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2b96ed; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2b96ed; color: #f5f5f5;
border: 1px solid #4ba5ee; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9acaf1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4da7f0; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#2b96ed; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #4ba5ee;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#9acaf1; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#9acaf1; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2b96ed; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#4da7f0; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #4ba5ee; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#9acaf1; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #4ba5ee; padding: 18px 40px; color:#9acaf1;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">MyRealTrip</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© MyRealTrip</span>
<span>MyRealTrip · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0071bb; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0071bb; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87badb; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #323746; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0071bb; color: #ffffff;
border: 1px solid #323746; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0071bb; color: #f5f5f5;
border: 1px solid #2786c4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87badb; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0868a8; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0071bb; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2786c4;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87badb; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87badb; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#323746; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0071bb; color:#ffffff;
border:1px solid #323746; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0868a8; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2786c4; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87badb; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2786c4; padding: 18px 40px; color:#87badb;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Mynavi</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Mynavi</span>
<span>Mynavi · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7234e0; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7234e0; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ba9eec; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #8243f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7234e0; color: #ffffff;
border: 1px solid #8243f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7234e0; color: #f5f5f5;
border: 1px solid #8753e3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ba9eec; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #7536e3; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#7234e0; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #8753e3;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#ba9eec; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#ba9eec; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#8243f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#7234e0; color:#ffffff;
border:1px solid #8243f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#7536e3; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #8753e3; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#ba9eec; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #8753e3; padding: 18px 40px; color:#ba9eec;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">NCSOFT</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© NCSOFT</span>
<span>NCSOFT · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #212126; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #212126; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #969698; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #36363d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #212126; color: #ffffff;
border: 1px solid #36363d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #212126; color: #f5f5f5;
border: 1px solid #434347; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #969698; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #24242a; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#212126; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #434347;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#969698; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#969698; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#36363d; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#212126; color:#ffffff;
border:1px solid #36363d; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#24242a; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #434347; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#969698; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #434347; padding: 18px 40px; color:#969698;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">NHN</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© NHN</span>
<span>NHN · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #125de6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #125de6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8fb1ee; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #125de6; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #125de6; color: #f5f5f5;
border: 1px solid #3675e8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8fb1ee; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3877ea; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#125de6; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3675e8;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8fb1ee; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8fb1ee; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#125de6; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#3877ea; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3675e8; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8fb1ee; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3675e8; padding: 18px 40px; color:#8fb1ee;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">NHN Cloud</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© NHN Cloud</span>
<span>NHN Cloud · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff0056; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff0056; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fa87ad; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #222222; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff0056; color: #222222;
border: 1px solid #222222; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff0056; color: #f5f5f5;
border: 1px solid #fd276f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fa87ad; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dc054e; color: #222222;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff0056; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd276f;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#fa87ad; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#fa87ad; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#222222; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff0056; color:#222222;
border:1px solid #222222; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#dc054e; color:#222222;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd276f; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#fa87ad; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd276f; padding: 18px 40px; color:#fa87ad;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">NRISE (WIPPY)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© NRISE (WIPPY)</span>
<span>NRISE (WIPPY) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.75; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.67; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; background: #76b900; color: #000000;
border: none; border-radius: 2px; padding: 11px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; background: transparent; color: #000000;
border: 1px solid #76b900; border-radius: 2px;
padding: 11px 13px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #000000;
border: 1px solid #bfbfbf; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.43; background: #f7f7f7; color: #1a1a1a;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dbdbdb;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.75; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.67; display:flex; gap:28px; color:#757575; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 36px; font-weight: 700; line-height: 1.25; margin:0; max-width:640px; color:#000000; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.67; margin:0; max-width:520px; color:#757575; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; background:#76b900; color:#000000;
border:none; border-radius:2px; padding:11px 24px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; background:transparent; color:#000000;
border:1px solid #76b900; border-radius:2px;
padding:11px 13px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.43; background:#f7f7f7; color:#1a1a1a;
border-radius:2px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dbdbdb; border-radius: 2px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.75; font-size: 16px; margin:0; color:#000000; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.67; margin:0; color:#757575; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.67; border-top:1px solid #dbdbdb; padding: 18px 40px; color:#757575;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">NVIDIA</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© NVIDIA</span>
<span>NVIDIA · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #76b900; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #76b900; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #3e5d09; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #bff230; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #76b900; color: #000000;
border: 1px solid #bff230; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #76b900; color: #111111;
border: 1px solid #669e03; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #3e5d09; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #82c208; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#76b900; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #669e03;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#3e5d09; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#3e5d09; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#bff230; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#76b900; color:#000000;
border:1px solid #bff230; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#82c208; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #669e03; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#3e5d09; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #669e03; padding: 18px 40px; color:#3e5d09;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">NVIDIA</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© NVIDIA</span>
<span>NVIDIA · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #03c75a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #03c75a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #88e0af; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #03c75a; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #03c75a; color: #000000;
border: 1px solid #2ace73; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #88e0af; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #11b772; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#03c75a; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2ace73;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#88e0af; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#88e0af; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#03c75a; color:#000000;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#11b772; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2ace73; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#88e0af; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2ace73; padding: 18px 40px; color:#88e0af;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Naver</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Naver</span>
<span>Naver · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #09aa5c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #09aa5c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8bd3b0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00de5a; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #09aa5c; color: #000000;
border: 1px solid #00de5a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #09aa5c; color: #f5f5f5;
border: 1px solid #2fb674; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8bd3b0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #08b25c; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#09aa5c; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2fb674;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8bd3b0; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8bd3b0; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00de5a; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#09aa5c; color:#000000;
border:1px solid #00de5a; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#08b25c; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2fb674; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8bd3b0; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2fb674; padding: 18px 40px; color:#8bd3b0;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Naver Pay</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Naver Pay</span>
<span>Naver Pay · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00dc64; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00dc64; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #096c36; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00dc64; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00dc64; color: #111111;
border: 1px solid #03bc57; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #096c36; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #29e27d; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00dc64; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #03bc57;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#096c36; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#096c36; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00dc64; color:#000000;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#29e27d; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #03bc57; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#096c36; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #03bc57; padding: 18px 40px; color:#096c36;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Naver Webtoon</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Naver Webtoon</span>
<span>Naver Webtoon · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fe7e43; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fe7e43; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c4228; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #09162d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fe7e43; color: #09162d;
border: 1px solid #09162d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fe7e43; color: #111111;
border: 1px solid #d86d3b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c4228; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d76d3f; color: #09162d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fe7e43; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d86d3b;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c4228; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c4228; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#09162d; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fe7e43; color:#09162d;
border:1px solid #09162d; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d76d3f; color:#09162d;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d86d3b; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c4228; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d86d3b; padding: 18px 40px; color:#7c4228;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Neosapience</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Neosapience</span>
<span>Neosapience · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e50914; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e50914; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ee8b90; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #b20710; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e50914; color: #ffffff;
border: 1px solid #b20710; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e50914; color: #f5f5f5;
border: 1px solid #e82f38; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ee8b90; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dd0913; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#e50914; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #e82f38;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#ee8b90; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#ee8b90; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#b20710; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e50914; color:#ffffff;
border:1px solid #b20710; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#dd0913; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #e82f38; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#ee8b90; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #e82f38; padding: 18px 40px; color:#ee8b90;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Netflix</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Netflix</span>
<span>Netflix · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #141414; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #141414; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #909090; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e50914; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #141414; color: #e50914;
border: 1px solid #e50914; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #141414; color: #f5f5f5;
border: 1px solid #383838; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #909090; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #351214; color: #e50914;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#141414; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #383838;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#909090; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#909090; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e50914; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#141414; color:#e50914;
border:1px solid #e50914; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#351214; color:#e50914;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #383838; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#909090; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #383838; padding: 18px 40px; color:#909090;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Netflix (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Netflix (iOS)</span>
<span>Netflix (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00de5a; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00de5a; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #096d32; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #17191d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00de5a; color: #17191d;
border: 1px solid #17191d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00de5a; color: #111111;
border: 1px solid #03bd4e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #096d32; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #04be50; color: #17191d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00de5a; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #03bd4e;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#096d32; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#096d32; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#17191d; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00de5a; color:#17191d;
border:1px solid #17191d; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#04be50; color:#17191d;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #03bd4e; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#096d32; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #03bd4e; padding: 18px 40px; color:#096d32;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Nexon</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Nexon</span>
<span>Nexon · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf9f6; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf9f6; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7a7978; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #faf9f6; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #faf9f6; color: #111111;
border: 1px solid #d5d4d1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7978; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fbfaf7; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#faf9f6; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d5d4d1;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7a7978; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7a7978; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#faf9f6; color:#000000;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fbfaf7; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d5d4d1; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7a7978; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d5d4d1; padding: 18px 40px; color:#7a7978;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Nextdoor (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Nextdoor (iOS)</span>
<span>Nextdoor (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #111111; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #111111; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8e8e8e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #111111; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #111111; color: #f5f5f5;
border: 1px solid #353535; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e8e8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #373737; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#111111; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #353535;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8e8e8e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8e8e8e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#111111; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#373737; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #353535; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8e8e8e; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #353535; padding: 18px 40px; color:#8e8e8e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Nike</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Nike</span>
<span>Nike · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.2; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; margin: 0; color: #707072; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.5; background: #111111; color: #ffffff;
border: none; border-radius: 9999px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.5; background: #f5f5f5; color: #111111;
border: 1px solid #111111; border-radius: 9999px;
padding: 16px 32px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 24px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707072; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.5; background: #ffffff; color: #111111;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dedede;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.2; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; display:flex; gap:28px; color:#707072; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 32px; font-weight: 500; line-height: 1.2; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; margin:0; max-width:520px; color:#707072; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.5; background:#111111; color:#ffffff;
border:none; border-radius:9999px; padding:16px 32px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.5; background:#f5f5f5; color:#111111;
border:1px solid #111111; border-radius:9999px;
padding:16px 32px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.5; background:#ffffff; color:#111111;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dedede; border-radius: 12px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.2; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; margin:0; color:#707072; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; border-top:1px solid #dedede; padding: 18px 40px; color:#707072;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Nike</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Nike</span>
<span>Nike · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ccff00; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ccff00;
border: 1px solid #ccff00; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #212900; color: #ccff00;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ccff00; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ccff00;
border:1px solid #ccff00; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#212900; color:#ccff00;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Nike Run Club (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Nike Run Club (iOS)</span>
<span>Nike Run Club (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e60012; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e60012; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ee878f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #484848; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e60012; color: #ffffff;
border: 1px solid #484848; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e60012; color: #f5f5f5;
border: 1px solid #e82736; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ee878f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cd0c1b; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#e60012; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #e82736;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#ee878f; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#ee878f; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#484848; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e60012; color:#ffffff;
border:1px solid #484848; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#cd0c1b; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #e82736; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#ee878f; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #e82736; padding: 18px 40px; color:#ee878f;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Nintendo</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Nintendo</span>
<span>Nintendo · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7a8aba; color: #8ba1d4;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7a8aba; color: #8ba1d4;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.3; margin: 0; color: #8ba1d4; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #60619c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.1; letter-spacing: 0.5px; background: #ecab37; color: #21242e;
border: none; border-radius: 2px; padding: {spacing.md};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.1; letter-spacing: 0.5px; background: #21242e; color: #ffffff;
border: 1px solid #e60012; border-radius: 0px;
padding: {spacing.md}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; background: #ffffff; color: #21242e;
border: 1px solid #7e90c0; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #60619c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 400; line-height: 1.3; background: #ecab37; color: #21242e;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#7a8aba; color:#8ba1d4; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #7c8dbe;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.3; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#60619c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 44px; font-weight: 900; line-height: 1; margin:0; max-width:640px; color:#8ba1d4; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#60619c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.1; letter-spacing: 0.5px; background:#ecab37; color:#21242e;
border:none; border-radius:2px; padding:{spacing.md};
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.1; letter-spacing: 0.5px; background:#21242e; color:#ffffff;
border:1px solid #e60012; border-radius:0px;
padding:{spacing.md}; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 400; line-height: 1.3; background:#ecab37; color:#21242e;
border-radius:2px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #7c8dbe; border-radius: 0px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.3; font-size: 16px; margin:0; color:#8ba1d4; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#60619c; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #7c8dbe; padding: 18px 40px; color:#60619c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Nintendo.com (2001)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Nintendo.com (2001)</span>
<span>Nintendo.com (2001) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbfbfd; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbfbfd; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7a7a7b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fbfbfd; color: #121212;
border: 1px solid #121212; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fbfbfd; color: #111111;
border: 1px solid #d6d6d7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6d6d7; color: #121212;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fbfbfd; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d6d6d7;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7a7a7b; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7a7a7b; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#121212; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fbfbfd; color:#121212;
border:1px solid #121212; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d6d6d7; color:#121212;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d6d6d7; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7a7a7b; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d6d6d7; padding: 18px 40px; color:#7a7a7b;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Noom (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Noom (iOS)</span>
<span>Noom (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3264f0; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3264f0; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9db4f3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #252a39; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3264f0; color: #252a39;
border: 1px solid #252a39; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3264f0; color: #f5f5f5;
border: 1px solid #517bf1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9db4f3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #305bd3; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#3264f0; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #517bf1;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#9db4f3; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#9db4f3; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#252a39; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3264f0; color:#252a39;
border:1px solid #252a39; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#305bd3; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #517bf1; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#9db4f3; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #517bf1; padding: 18px 40px; color:#9db4f3;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Nota AI</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Nota AI</span>
<span>Nota AI · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0075de;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0075de;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #0075de; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #bbb8b1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background: #5645d4; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 18px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background: transparent; color: #1a1a1a;
border: 1px solid #5645d4; border-radius: 8px;
padding: 10px 18px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #1a1a1a;
border: 1px solid #bfdcf7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bbb8b1; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; background: #5645d4; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0075de; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dbecfa;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; display:flex; gap:28px; color:#bbb8b1; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 36px; font-weight: 600; line-height: 1.2; letter-spacing: -0.5px; margin:0; max-width:640px; color:#0075de; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin:0; max-width:520px; color:#bbb8b1; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background:#5645d4; color:#ffffff;
border:none; border-radius:8px; padding:10px 18px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background:transparent; color:#1a1a1a;
border:1px solid #5645d4; border-radius:8px;
padding:10px 18px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; background:#5645d4; color:#ffffff;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dbecfa; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; font-size: 16px; margin:0; color:#0075de; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin:0; color:#bbb8b1; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; border-top:1px solid #dbecfa; padding: 18px 40px; color:#bbb8b1;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Notion</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Notion</span>
<span>Notion · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0075de; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0075de; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bbeb; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #005bab; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0075de; color: #000000;
border: 1px solid #005bab; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0075de; color: #f5f5f5;
border: 1px solid #2789e2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bbeb; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0071d6; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0075de; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2789e2;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87bbeb; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87bbeb; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#005bab; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0075de; color:#000000;
border:1px solid #005bab; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0071d6; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2789e2; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87bbeb; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2789e2; padding: 18px 40px; color:#87bbeb;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Notion</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Notion</span>
<span>Notion · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f1f1ef; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f1f1ef; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfdfc; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f1f1ef; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#000000;
border:1px solid #f1f1ef; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fdfdfc; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Notion (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Notion (iOS)</span>
<span>Notion (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #820ad1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #820ad1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #c18be5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #9b2be0; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #820ad1; color: #ffffff;
border: 1px solid #9b2be0; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #820ad1; color: #f5f5f5;
border: 1px solid #9430d7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c18be5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #860fd3; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#820ad1; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #9430d7;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#c18be5; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#c18be5; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#9b2be0; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#820ad1; color:#ffffff;
border:1px solid #9b2be0; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#860fd3; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #9430d7; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#c18be5; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #9430d7; padding: 18px 40px; color:#c18be5;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Nubank (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Nubank (iOS)</span>
<span>Nubank (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2a1f60; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2a1f60; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9a95b2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2a1f60; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2a1f60; color: #f5f5f5;
border: 1px solid #4a4178; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a95b2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4c4379; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#2a1f60; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #4a4178;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#9a95b2; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#9a95b2; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2a1f60; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#4c4379; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #4a4178; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#9a95b2; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #4a4178; padding: 18px 40px; color:#9a95b2;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">ONE store</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© ONE store</span>
<span>ONE store · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #8081ff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #8081ff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #43437c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0abbb5; color: #000000;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #8081ff; color: #000000;
border: 1px solid #0abbb5; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #8081ff; color: #111111;
border: 1px solid #6e6fd9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #43437c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #6d8af3; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#8081ff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #6e6fd9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#43437c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#43437c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0abbb5; color:#000000;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#8081ff; color:#000000;
border:1px solid #0abbb5; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#6d8af3; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #6e6fd9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#43437c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #6e6fd9; padding: 18px 40px; color:#43437c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">OPENPOINT</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© OPENPOINT</span>
<span>OPENPOINT · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1e1e1e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1e1e1e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #949494; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #262626; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1e1e1e; color: #ffffff;
border: 1px solid #262626; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1e1e1e; color: #f5f5f5;
border: 1px solid #404040; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949494; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1f1f1f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1e1e1e; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #404040;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#949494; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#949494; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#262626; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1e1e1e; color:#ffffff;
border:1px solid #262626; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#1f1f1f; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #404040; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#949494; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #404040; padding: 18px 40px; color:#949494;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Obsidian (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Obsidian (iOS)</span>
<span>Obsidian (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f050f8; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f050f8; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #752d79; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #100030; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f050f8; color: #100030;
border: 1px solid #100030; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f050f8; color: #111111;
border: 1px solid #cc46d3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #752d79; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cc43d8; color: #100030;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f050f8; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #cc46d3;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#752d79; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#752d79; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#100030; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f050f8; color:#100030;
border:1px solid #100030; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#cc43d8; color:#100030;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #cc46d3; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#752d79; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #cc46d3; padding: 18px 40px; color:#752d79;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Octopus Energy</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Octopus Energy</span>
<span>Octopus Energy · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00a1ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00a1ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87cffa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2f3438; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a1ff; color: #2f3438;
border: 1px solid #2f3438; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00a1ff; color: #f5f5f5;
border: 1px solid #27aefd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87cffa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0890df; color: #2f3438;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00a1ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27aefd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87cffa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87cffa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2f3438; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00a1ff; color:#2f3438;
border:1px solid #2f3438; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0890df; color:#2f3438;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27aefd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87cffa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27aefd; padding: 18px 40px; color:#87cffa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Ohouse</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Ohouse</span>
<span>Ohouse · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2f2f2; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f2f2f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfdfd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f2f2f2; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#000000;
border:1px solid #f2f2f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fdfdfd; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">OkCupid (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© OkCupid (iOS)</span>
<span>OkCupid (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #82dc28; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #82dc28; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #446c1b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #82dc28; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #82dc28; color: #111111;
border: 1px solid #70bc24; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #446c1b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #96e24a; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#82dc28; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #70bc24;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#446c1b; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#446c1b; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#82dc28; color:#000000;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#96e24a; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #70bc24; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#446c1b; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #70bc24; padding: 18px 40px; color:#446c1b;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Olive Young</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Olive Young</span>
<span>Olive Young · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #a3a3a3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; background: #000000; color: #ffffff;
border: none; border-radius: 9999px; padding: 8px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 9999px;
padding: 8px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #000000;
border: 1px solid #bfbfbf; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a3a3a3; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 1.43; background: #fafafa; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dbdbdb;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; display:flex; gap:28px; color:#a3a3a3; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 36px; font-weight: 500; line-height: 1.11; margin:0; max-width:640px; color:#000000; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin:0; max-width:520px; color:#a3a3a3; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; background:#000000; color:#ffffff;
border:none; border-radius:9999px; padding:8px 20px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; background:#ffffff; color:#000000;
border:1px solid #000000; border-radius:9999px;
padding:8px 20px; white-space:nowrap; cursor:default;
}
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 1.43; background:#fafafa; color:#000000;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dbdbdb; border-radius: 12px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; font-size: 16px; margin:0; color:#000000; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin:0; color:#a3a3a3; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; border-top:1px solid #dbdbdb; padding: 18px 40px; color:#a3a3a3;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Ollama</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Ollama</span>
<span>Ollama · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #262626; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #262626; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #060606; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#262626; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #262626; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#060606; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Ollama</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Ollama</span>
<span>Ollama · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #006aff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #006aff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b6fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #408fff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #006aff; color: #ffffff;
border: 1px solid #408fff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #006aff; color: #f5f5f5;
border: 1px solid #2780fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b6fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0a70ff; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#006aff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2780fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87b6fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87b6fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#408fff; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#006aff; color:#ffffff;
border:1px solid #408fff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0a70ff; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2780fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87b6fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2780fd; padding: 18px 40px; color:#87b6fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Omnichat</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Omnichat</span>
<span>Omnichat · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #10a37f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #10a37f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8ed0c0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a7f64; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #10a37f; color: #000000;
border: 1px solid #1a7f64; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #10a37f; color: #f5f5f5;
border: 1px solid #35b092; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8ed0c0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #129d7b; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#10a37f; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #35b092;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8ed0c0; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8ed0c0; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1a7f64; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#10a37f; color:#000000;
border:1px solid #1a7f64; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#129d7b; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #35b092; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8ed0c0; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #35b092; padding: 18px 40px; color:#8ed0c0;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">OpenAI</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© OpenAI</span>
<span>OpenAI · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fdfcfc; color: #201d1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fdfcfc; color: #201d1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 16px; font-weight: 700; line-height: 1.5; margin: 0; color: #201d1d; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 400; line-height: 1.5; margin: 0; color: #646262; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 500; line-height: 2; background: #201d1d; color: #fdfcfc;
border: none; border-radius: 4px; padding: 4px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 500; line-height: 2; background: #fdfcfc; color: #201d1d;
border: 1px solid #201d1d; border-radius: 4px;
padding: 4px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f8f7f7; color: #201d1d;
border: 1px solid #c6c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #646262; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 2; background: #201d1d; color: #fdfcfc;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fdfcfc; color:#201d1d; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dedddd;
}
.brand { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 16px; font-weight: 700; line-height: 1.5; font-size: 18px; margin:0; }
.navlinks { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 400; line-height: 1.5; display:flex; gap:28px; color:#646262; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 38px; font-weight: 700; line-height: 1.5; margin:0; max-width:640px; color:#201d1d; }
.hero p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 400; line-height: 1.5; margin:0; max-width:520px; color:#646262; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 500; line-height: 2; background:#201d1d; color:#fdfcfc;
border:none; border-radius:4px; padding:4px 20px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 500; line-height: 2; background:#fdfcfc; color:#201d1d;
border:1px solid #201d1d; border-radius:4px;
padding:4px 20px; white-space:nowrap; cursor:default;
}
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 2; background:#201d1d; color:#fdfcfc;
border-radius:4px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dedddd; border-radius: 4px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 16px; font-weight: 700; line-height: 1.5; font-size: 16px; margin:0; color:#201d1d; }
.feature-card p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 400; line-height: 1.5; margin:0; color:#646262; }
footer {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 400; line-height: 1.5; border-top:1px solid #dedddd; padding: 18px 40px; color:#646262;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">OpenCode</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© OpenCode</span>
<span>OpenCode · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #201d1d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #201d1d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #050505; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#201d1d; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #201d1d; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#050505; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">OpenCode AI</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© OpenCode AI</span>
<span>OpenCode AI · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #da3743; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #da3743;
border: 1px solid #da3743; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f9dfe1; color: #da3743;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#da3743; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#da3743;
border:1px solid #da3743; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#f9dfe1; color:#da3743;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">OpenTable (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© OpenTable (iOS)</span>
<span>OpenTable (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0b0b0f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0b0b0f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8c8c8e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4fd1c5; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b0b0f; color: #4fd1c5;
border: 1px solid #4fd1c5; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0b0b0f; color: #f5f5f5;
border: 1px solid #303034; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8c8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #162b2c; color: #4fd1c5;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0b0b0f; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #303034;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8c8c8e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8c8c8e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#4fd1c5; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0b0b0f; color:#4fd1c5;
border:1px solid #4fd1c5; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#162b2c; color:#4fd1c5;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #303034; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8c8c8e; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #303034; padding: 18px 40px; color:#8c8c8e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Oura (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Oura (iOS)</span>
<span>Oura (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbfaf6; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbfaf6; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7a7a78; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7f5ef; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fbfaf6; color: #000000;
border: 1px solid #f7f5ef; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fbfaf6; color: #111111;
border: 1px solid #d6d5d1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a78; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #faf9f5; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fbfaf6; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d6d5d1;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7a7a78; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7a7a78; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f7f5ef; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fbfaf6; color:#000000;
border:1px solid #f7f5ef; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#faf9f5; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d6d5d1; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7a7a78; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d6d5d1; padding: 18px 40px; color:#7a7a78;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Overcast (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Overcast (iOS)</span>
<span>Overcast (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff2233; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff2233; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fa969e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff1414; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff2233; color: #000000;
border: 1px solid #ff1414; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff2233; color: #f5f5f5;
border: 1px solid #fd4452; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fa969e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff202e; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff2233; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd4452;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#fa969e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#fa969e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff1414; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff2233; color:#000000;
border:1px solid #ff1414; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ff202e; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd4452; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#fa969e; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd4452; padding: 18px 40px; color:#fa969e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">PAYCO</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© PAYCO</span>
<span>PAYCO · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ea1717; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ea1717; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f09191; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fe3b52; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ea1717; color: #000000;
border: 1px solid #fe3b52; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ea1717; color: #f5f5f5;
border: 1px solid #ec3b3b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f09191; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ed1d20; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ea1717; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #ec3b3b;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f09191; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f09191; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fe3b52; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ea1717; color:#000000;
border:1px solid #fe3b52; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ed1d20; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #ec3b3b; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f09191; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #ec3b3b; padding: 18px 40px; color:#f09191;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">PChome</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© PChome</span>
<span>PChome · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff7200; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff7200; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c3d09; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff432b; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff7200; color: #000000;
border: 1px solid #ff432b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff7200; color: #111111;
border: 1px solid #d96203; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c3d09; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff6a07; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff7200; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d96203;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c3d09; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c3d09; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff432b; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff7200; color:#000000;
border:1px solid #ff432b; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ff6a07; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d96203; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c3d09; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d96203; padding: 18px 40px; color:#7c3d09;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">PIXNET</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© PIXNET</span>
<span>PIXNET · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f33d4d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f33d4d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f4a2a9; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2c2c2f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f33d4d; color: #2c2c2f;
border: 1px solid #2c2c2f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f33d4d; color: #f5f5f5;
border: 1px solid #f35a68; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f4a2a9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d33a48; color: #2c2c2f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f33d4d; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #f35a68;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f4a2a9; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f4a2a9; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2c2c2f; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f33d4d; color:#2c2c2f;
border:1px solid #2c2c2f; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d33a48; color:#2c2c2f;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #f35a68; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f4a2a9; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #f35a68; padding: 18px 40px; color:#f4a2a9;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">POSTYPE</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© POSTYPE</span>
<span>POSTYPE · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #dd006f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #dd006f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ea87b9; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #dd006f; color: #ffffff;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #dd006f; color: #f5f5f5;
border: 1px solid #e12784; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ea87b9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #c81084; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#dd006f; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #e12784;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#ea87b9; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#ea87b9; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#dd006f; color:#ffffff;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#c81084; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #e12784; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#ea87b9; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #e12784; padding: 18px 40px; color:#ea87b9;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">POYA</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© POYA</span>
<span>POYA · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #aba1fa; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #aba1fa; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #56527a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #aba1fa; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #aba1fa; color: #111111;
border: 1px solid #928ad5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #56527a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #9087d2; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#aba1fa; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #928ad5;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#56527a; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#56527a; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#aba1fa; color:#000000;
border:1px solid #000000; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#9087d2; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #928ad5; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#56527a; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #928ad5; padding: 18px 40px; color:#56527a;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">POZAlabs</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© POZAlabs</span>
<span>POZAlabs · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7a3bff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7a3bff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #bea1fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #6429e6; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7a3bff; color: #ffffff;
border: 1px solid #6429e6; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7a3bff; color: #f5f5f5;
border: 1px solid #8e59fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bea1fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #7638fb; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#7a3bff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #8e59fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#bea1fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#bea1fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#6429e6; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#7a3bff; color:#ffffff;
border:1px solid #6429e6; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#7638fb; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #8e59fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#bea1fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #8e59fd; padding: 18px 40px; color:#bea1fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">PUBLY</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© PUBLY</span>
<span>PUBLY · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2d72d2; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2d72d2; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9bbae5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #111418; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2d72d2; color: #111418;
border: 1px solid #111418; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2d72d2; color: #f5f5f5;
border: 1px solid #4d87d8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9bbae5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2963b4; color: #111418;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#2d72d2; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #4d87d8;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#9bbae5; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#9bbae5; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#111418; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2d72d2; color:#111418;
border:1px solid #111418; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2963b4; color:#111418;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #4d87d8; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#9bbae5; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #4d87d8; padding: 18px 40px; color:#9bbae5;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Palantir Blueprint</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Palantir Blueprint</span>
<span>Palantir Blueprint · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0041c0; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0041c0; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87a4dd; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2f2f2; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0041c0; color: #f2f2f2;
border: 1px solid #f2f2f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0041c0; color: #f5f5f5;
border: 1px solid #275ec8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87a4dd; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #275dc8; color: #f2f2f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0041c0; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #275ec8;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87a4dd; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87a4dd; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f2f2f2; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0041c0; color:#f2f2f2;
border:1px solid #f2f2f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#275dc8; color:#f2f2f2;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #275ec8; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87a4dd; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #275ec8; padding: 18px 40px; color:#87a4dd;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Panasonic</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Panasonic</span>
<span>Panasonic · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #224099; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #224099; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #96a4cc; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b0f1c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #224099; color: #ffffff;
border: 1px solid #0b0f1c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #224099; color: #f5f5f5;
border: 1px solid #445da8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #96a4cc; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1e3885; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#224099; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #445da8;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#96a4cc; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#96a4cc; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0b0f1c; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#224099; color:#ffffff;
border:1px solid #0b0f1c; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#1e3885; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #445da8; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#96a4cc; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #445da8; padding: 18px 40px; color:#96a4cc;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Pandora (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Pandora (iOS)</span>
<span>Pandora (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f4efe1; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f4efe1; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfcfa; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f4efe1; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#000000;
border:1px solid #f4efe1; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fdfcfa; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Panera (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Panera (iOS)</span>
<span>Panera (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0e2d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0e2d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8b8d9b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e1438; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0e2d; color: #ffffff;
border: 1px solid #0e1438; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a0e2d; color: #f5f5f5;
border: 1px solid #30334d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8d9b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0b0f2f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0a0e2d; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #30334d;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8b8d9b; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8b8d9b; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0e1438; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0a0e2d; color:#ffffff;
border:1px solid #0e1438; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0b0f2f; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #30334d; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8b8d9b; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #30334d; padding: 18px 40px; color:#8b8d9b;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Paramount+ (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Paramount+ (iOS)</span>
<span>Paramount+ (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#292929; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Patreon</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Patreon</span>
<span>Patreon · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0066cc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0066cc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b5e3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0066cc; color: #ffffff;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0066cc; color: #f5f5f5;
border: 1px solid #277dd3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b5e3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e66d2; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0066cc; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #277dd3;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87b5e3; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87b5e3; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0066cc; color:#ffffff;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0e66d2; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #277dd3; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87b5e3; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #277dd3; padding: 18px 40px; color:#87b5e3;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">PatternFly</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© PatternFly</span>
<span>PatternFly · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #002991; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #002991; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8799c8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #60cdff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #002991; color: #60cdff;
border: 1px solid #60cdff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #002991; color: #f5f5f5;
border: 1px solid #274aa1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8799c8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0f43a3; color: #60cdff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#002991; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #274aa1;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8799c8; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8799c8; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#60cdff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#002991; color:#60cdff;
border:1px solid #60cdff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0f43a3; color:#60cdff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #274aa1; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8799c8; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #274aa1; padding: 18px 40px; color:#8799c8;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">PayPal</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© PayPal</span>
<span>PayPal · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #003087; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #003087; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #879cc4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0070ba; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #003087; color: #ffffff;
border: 1px solid #0070ba; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #003087; color: #f5f5f5;
border: 1px solid #275099; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #879cc4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #003a8f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#003087; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #275099;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#879cc4; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#879cc4; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0070ba; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#003087; color:#ffffff;
border:1px solid #0070ba; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#003a8f; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #275099; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#879cc4; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #275099; padding: 18px 40px; color:#879cc4;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">PayPal (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© PayPal (iOS)</span>
<span>PayPal (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff0033; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff0033; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fa879e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e0002e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff0033; color: #000000;
border: 1px solid #e0002e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff0033; color: #f5f5f5;
border: 1px solid #fd2752; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fa879e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fa0032; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff0033; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd2752;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#fa879e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#fa879e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e0002e; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff0033; color:#000000;
border:1px solid #e0002e; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fa0032; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd2752; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#fa879e; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd2752; padding: 18px 40px; color:#fa879e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">PayPay</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© PayPay</span>
<span>PayPay · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #008cff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #008cff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87c6fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0077fe; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #008cff; color: #000000;
border: 1px solid #0077fe; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #008cff; color: #f5f5f5;
border: 1px solid #279dfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87c6fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0089ff; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#008cff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #279dfd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87c6fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87c6fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0077fe; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#008cff; color:#000000;
border:1px solid #0077fe; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0089ff; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #279dfd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87c6fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #279dfd; padding: 18px 40px; color:#87c6fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Payhere</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Payhere</span>
<span>Payhere · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a14; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a14; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8b8b90; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #140e26; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0a14; color: #ffffff;
border: 1px solid #140e26; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a0a14; color: #f5f5f5;
border: 1px solid #303038; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8b90; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0c0b17; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0a0a14; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #303038;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8b8b90; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8b8b90; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#140e26; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0a0a14; color:#ffffff;
border:1px solid #140e26; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0c0b17; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #303038; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8b8b90; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #303038; padding: 18px 40px; color:#8b8b90;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Peacock (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Peacock (iOS)</span>
<span>Peacock (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a3a5c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a3a5c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #92a1b0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a3a5c; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a3a5c; color: #f5f5f5;
border: 1px solid #3d5874; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #92a1b0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #244174; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1a3a5c; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3d5874;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#92a1b0; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#92a1b0; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1a3a5c; color:#5865f2;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#244174; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3d5874; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#92a1b0; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3d5874; padding: 18px 40px; color:#92a1b0;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Pega UX Design System</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Pega UX Design System</span>
<span>Pega UX Design System · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #df1e2e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #df1e2e;
border: 1px solid #df1e2e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #240507; color: #df1e2e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#df1e2e; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#df1e2e;
border:1px solid #df1e2e; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#240507; color:#df1e2e;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Peloton (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Peloton (iOS)</span>
<span>Peloton (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffc32d; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffc32d; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c611e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffc32d; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffc32d; color: #111111;
border: 1px solid #d9a729; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c611e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ffcd4f; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffc32d; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9a729;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c611e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c611e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffc32d; color:#000000;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ffcd4f; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9a729; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c611e; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9a729; padding: 18px 40px; color:#7c611e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">PeopleFund</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© PeopleFund</span>
<span>PeopleFund · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #20808d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #20808d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #95c0c6; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a6873; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #20808d; color: #ffffff;
border: 1px solid #1a6873; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #20808d; color: #f5f5f5;
border: 1px solid #42939e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #95c0c6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1f7c89; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#20808d; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #42939e;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#95c0c6; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#95c0c6; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1a6873; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#20808d; color:#ffffff;
border:1px solid #1a6873; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#1f7c89; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #42939e; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#95c0c6; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #42939e; padding: 18px 40px; color:#95c0c6;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Perplexity</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Perplexity</span>
<span>Perplexity · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a0a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a0a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8b8b8b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #20b8cd; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0a0a; color: #20b8cd;
border: 1px solid #20b8cd; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a0a0a; color: #f5f5f5;
border: 1px solid #303030; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8b8b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e2629; color: #20b8cd;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0a0a0a; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #303030;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8b8b8b; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8b8b8b; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#20b8cd; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0a0a0a; color:#20b8cd;
border:1px solid #20b8cd; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0e2629; color:#20b8cd;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #303030; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8b8b8b; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #303030; padding: 18px 40px; color:#8b8b8b;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Perplexity (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Perplexity (iOS)</span>
<span>Perplexity (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4081; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4081; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faa4c1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ea306f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4081; color: #000000;
border: 1px solid #ea306f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4081; color: #f5f5f5;
border: 1px solid #fd5d94; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faa4c1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fc3d7e; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff4081; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd5d94;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#faa4c1; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#faa4c1; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ea306f; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff4081; color:#000000;
border:1px solid #ea306f; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fc3d7e; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd5d94; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#faa4c1; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd5d94; padding: 18px 40px; color:#faa4c1;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Pet Friends</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Pet Friends</span>
<span>Pet Friends · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #4fc3c4; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #4fc3c4; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #2d6162; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #b7e1da; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4fc3c4; color: #000000;
border: 1px solid #b7e1da; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #4fc3c4; color: #111111;
border: 1px solid #45a7a7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #2d6162; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #60c8c8; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#4fc3c4; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #45a7a7;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#2d6162; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#2d6162; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#b7e1da; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#4fc3c4; color:#000000;
border:1px solid #b7e1da; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#60c8c8; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #45a7a7; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#2d6162; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #45a7a7; padding: 18px 40px; color:#2d6162;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">PicCollage</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© PicCollage</span>
<span>PicCollage · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff595a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff595a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faafaf; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #10567b; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff595a; color: #10567b;
border: 1px solid #10567b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff595a; color: #f5f5f5;
border: 1px solid #fd7273; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faafaf; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d9595f; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff595a; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd7273;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#faafaf; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#faafaf; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#10567b; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff595a; color:#10567b;
border:1px solid #10567b; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d9595f; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd7273; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#faafaf; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd7273; padding: 18px 40px; color:#faafaf;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Pinkoi</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Pinkoi</span>
<span>Pinkoi · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e60023; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e60023; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ee8796; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e60023; color: #ffffff;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e60023; color: #f5f5f5;
border: 1px solid #e82745; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ee8796; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cf1044; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#e60023; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #e82745;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#ee8796; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#ee8796; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e60023; color:#ffffff;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#cf1044; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #e82745; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#ee8796; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #e82745; padding: 18px 40px; color:#ee8796;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Pinterest</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Pinterest</span>
<span>Pinterest · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; margin: 0; color: #62625b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; background: #e60023; color: #ffffff;
border: none; border-radius: 16px; padding: 6px 14px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; background: #e5e5e0; color: #000000;
border: 1px solid #e60023; border-radius: 16px;
padding: 6px 14px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; background: #ffffff; color: #000000;
border: 1px solid #bfbfbf; border-radius: 16px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #62625b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1; background: #f6f6f3; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dbdbdb;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#62625b; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 44px; font-weight: 700; line-height: 1.15; letter-spacing: -0.8px; margin:0; max-width:640px; color:#000000; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#62625b; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; background:#e60023; color:#ffffff;
border:none; border-radius:16px; padding:6px 14px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; background:#e5e5e0; color:#000000;
border:1px solid #e60023; border-radius:16px;
padding:6px 14px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1; background:#f6f6f3; color:#000000;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dbdbdb; border-radius: 16px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; font-size: 16px; margin:0; color:#000000; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; margin:0; color:#62625b; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; border-top:1px solid #dbdbdb; padding: 18px 40px; color:#62625b;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Pinterest</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Pinterest</span>
<span>Pinterest · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e60023; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #e60023;
border: 1px solid #e60023; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fbd6dc; color: #e60023;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e60023; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#e60023;
border:1px solid #e60023; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fbd6dc; color:#e60023;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Pinterest (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Pinterest (iOS)</span>
<span>Pinterest (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #02294b; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #02294b; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8899a8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #012e37; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #02294b; color: #ffffff;
border: 1px solid #012e37; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #02294b; color: #f5f5f5;
border: 1px solid #294a66; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8899a8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #022a48; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#02294b; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #294a66;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8899a8; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8899a8; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#012e37; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#02294b; color:#ffffff;
border:1px solid #012e37; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#022a48; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #294a66; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8899a8; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #294a66; padding: 18px 40px; color:#8899a8;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Plaid</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Plaid</span>
<span>Plaid · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0070d1; color: #0064b7;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0070d1; color: #0064b7;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 300; line-height: 1.25; letter-spacing: 0.1px; margin: 0; color: #0064b7; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.45px; background: #0070d1; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.45px; background: transparent; color: #000000;
border: 1px solid #0070d1; border-radius: 9999px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0.1px; background: #ffffff; color: #000000;
border: 1px solid #006dca; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.5; background: #0070d1; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0070d1; color:#0064b7; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #006ecd;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 300; line-height: 1.25; letter-spacing: 0.1px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; display:flex; gap:28px; color:#6b6b6b; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 44px; font-weight: 300; line-height: 1.25; letter-spacing: 0.1px; margin:0; max-width:640px; color:#0064b7; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; margin:0; max-width:520px; color:#6b6b6b; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.45px; background:#0070d1; color:#ffffff;
border:none; border-radius:9999px; padding:12px 28px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.45px; background:transparent; color:#000000;
border:1px solid #0070d1; border-radius:9999px;
padding:12px 28px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.5; background:#0070d1; color:#ffffff;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #006ecd; border-radius: 12px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 300; line-height: 1.25; letter-spacing: 0.1px; font-size: 16px; margin:0; color:#0064b7; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; margin:0; color:#6b6b6b; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; border-top:1px solid #006ecd; padding: 18px 40px; color:#6b6b6b;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">PlayStation</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© PlayStation</span>
<span>PlayStation · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0098db; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0098db; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87cbe9; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a6e2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0098db; color: #000000;
border: 1px solid #00a6e2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0098db; color: #f5f5f5;
border: 1px solid #27a7df; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87cbe9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #009adc; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0098db; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27a7df;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87cbe9; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87cbe9; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00a6e2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0098db; color:#000000;
border:1px solid #00a6e2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#009adc; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27a7df; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87cbe9; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27a7df; padding: 18px 40px; color:#87cbe9;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Plenty of Fish (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Plenty of Fish (iOS)</span>
<span>Plenty of Fish (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1f2326; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1f2326; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #959698; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e5a00d; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1f2326; color: #e5a00d;
border: 1px solid #e5a00d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1f2326; color: #f5f5f5;
border: 1px solid #414547; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #959698; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3f3722; color: #e5a00d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1f2326; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #414547;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#959698; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#959698; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e5a00d; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1f2326; color:#e5a00d;
border:1px solid #e5a00d; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#3f3722; color:#e5a00d;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #414547; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#959698; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #414547; padding: 18px 40px; color:#959698;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Plex (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Plex (iOS)</span>
<span>Plex (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0b0f1f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0b0f1f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8c8e95; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0048ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b0f1f; color: #0048ff;
border: 1px solid #0048ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0b0f1f; color: #f5f5f5;
border: 1px solid #303441; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8e95; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #091843; color: #0048ff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0b0f1f; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #303441;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8c8e95; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8c8e95; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0048ff; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0b0f1f; color:#0048ff;
border:1px solid #0048ff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#091843; color:#0048ff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #303441; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8c8e95; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #303441; padding: 18px 40px; color:#8c8e95;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Pluto TV (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Pluto TV (iOS)</span>
<span>Pluto TV (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f43e37; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f43e37; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f5a3a0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f43e37; color: #1a1a1a;
border: 1px solid #1a1a1a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f43e37; color: #f5f5f5;
border: 1px solid #f45b55; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f5a3a0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d13832; color: #1a1a1a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f43e37; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #f45b55;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f5a3a0; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f5a3a0; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1a1a1a; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f43e37; color:#1a1a1a;
border:1px solid #1a1a1a; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d13832; color:#1a1a1a;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #f45b55; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f5a3a0; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #f45b55; padding: 18px 40px; color:#f5a3a0;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Pocket Casts (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Pocket Casts (iOS)</span>
<span>Pocket Casts (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fc6b2d; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fc6b2d; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7b3a1e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #363a44; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fc6b2d; color: #363a44;
border: 1px solid #363a44; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fc6b2d; color: #111111;
border: 1px solid #d65d29; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b3a1e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dc6331; color: #363a44;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fc6b2d; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d65d29;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7b3a1e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7b3a1e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#363a44; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fc6b2d; color:#363a44;
border:1px solid #363a44; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#dc6331; color:#363a44;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d65d29; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7b3a1e; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d65d29; padding: 18px 40px; color:#7b3a1e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">PortOne</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© PortOne</span>
<span>PortOne · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #862983; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #862983; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #c399c2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a6a3; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #862983; color: #00a6a3;
border: 1px solid #00a6a3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #862983; color: #f5f5f5;
border: 1px solid #984a95; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c399c2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #713d88; color: #00a6a3;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#862983; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #984a95;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#c399c2; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#c399c2; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00a6a3; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#862983; color:#00a6a3;
border:1px solid #00a6a3; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#713d88; color:#00a6a3;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #984a95; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#c399c2; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #984a95; padding: 18px 40px; color:#c399c2;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Portaly</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Portaly</span>
<span>Portaly · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeefe9; color: #23251d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeefe9; color: #23251d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 21px; font-weight: 700; line-height: 1.4; letter-spacing: -0.5px; margin: 0; color: #23251d; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; margin: 0; color: #6c6e63; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.5; background: #f7a501; color: #23251d;
border: none; border-radius: 6px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.5; background: #e5e7e0; color: #23251d;
border: 1px solid #f7a501; border-radius: 6px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #23251d;
border: 1px solid #bbbcb6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6c6e63; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.33; background: transparent; color: #4d4f46;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#eeefe9; color:#23251d; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d2d3cc;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 21px; font-weight: 700; line-height: 1.4; letter-spacing: -0.5px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; display:flex; gap:28px; color:#6c6e63; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 36px; font-weight: 700; line-height: 1.5; margin:0; max-width:640px; color:#23251d; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; margin:0; max-width:520px; color:#6c6e63; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.5; background:#f7a501; color:#23251d;
border:none; border-radius:6px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.5; background:#e5e7e0; color:#23251d;
border:1px solid #f7a501; border-radius:6px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.33; background:transparent; color:#4d4f46;
border-radius:0px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d2d3cc; border-radius: 6px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 21px; font-weight: 700; line-height: 1.4; letter-spacing: -0.5px; font-size: 16px; margin:0; color:#23251d; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; margin:0; color:#6c6e63; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; border-top:1px solid #d2d3cc; padding: 18px 40px; color:#6c6e63;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">PostHog</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© PostHog</span>
<span>PostHog · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1d4aff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1d4aff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #94a8fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1e1f23; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1d4aff; color: #1e1f23;
border: 1px solid #1e1f23; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1d4aff; color: #f5f5f5;
border: 1px solid #4065fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #94a8fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1d43dc; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1d4aff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #4065fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#94a8fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#94a8fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1e1f23; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1d4aff; color:#1e1f23;
border:1px solid #1e1f23; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#1d43dc; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #4065fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#94a8fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #4065fd; padding: 18px 40px; color:#94a8fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">PostHog</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© PostHog</span>
<span>PostHog · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a1a1a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a1a1a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #929292; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6c37; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ff6c37;
border: 1px solid #ff6c37; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a1a1a; color: #f5f5f5;
border: 1px solid #3d3d3d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #929292; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3f271f; color: #ff6c37;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1a1a1a; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3d3d3d;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#929292; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#929292; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff6c37; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1a1a1a; color:#ff6c37;
border:1px solid #ff6c37; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#3f271f; color:#ff6c37;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3d3d3d; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#929292; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3d3d3d; padding: 18px 40px; color:#929292;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Postman (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Postman (iOS)</span>
<span>Postman (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0f171e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0f171e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8e9194; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a242f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0f171e; color: #ffffff;
border: 1px solid #1a242f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0f171e; color: #f5f5f5;
border: 1px solid #343b40; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e9194; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #111921; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0f171e; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #343b40;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8e9194; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8e9194; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1a242f; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0f171e; color:#ffffff;
border:1px solid #1a242f; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#111921; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #343b40; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8e9194; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #343b40; padding: 18px 40px; color:#8e9194;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Prime Video (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Prime Video (iOS)</span>
<span>Prime Video (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #8169ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #8169ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #c1b6fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #6d4ff0; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #8169ff; color: #000000;
border: 1px solid #6d4ff0; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #8169ff; color: #f5f5f5;
border: 1px solid #947ffd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c1b6fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #7e65fd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#8169ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #947ffd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#c1b6fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#c1b6fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#6d4ff0; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#8169ff; color:#000000;
border:1px solid #6d4ff0; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#7e65fd; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #947ffd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#c1b6fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #947ffd; padding: 18px 40px; color:#c1b6fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">ProtoPie</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© ProtoPie</span>
<span>ProtoPie · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5500; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5500; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faad87; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #222222; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5500; color: #222222;
border: 1px solid #222222; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5500; color: #f5f5f5;
border: 1px solid #fd6f27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faad87; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dc4d05; color: #222222;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff5500; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd6f27;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#faad87; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#faad87; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#222222; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff5500; color:#222222;
border:1px solid #222222; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#dc4d05; color:#222222;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd6f27; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#faad87; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd6f27; padding: 18px 40px; color:#faad87;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">QANDA</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© QANDA</span>
<span>QANDA · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1033d4; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1033d4; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8e9ee6; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2f67d6; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1033d4; color: #ffffff;
border: 1px solid #2f67d6; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1033d4; color: #f5f5f5;
border: 1px solid #3552d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e9ee6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #153bd4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1033d4; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3552d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8e9ee6; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8e9ee6; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2f67d6; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1033d4; color:#ffffff;
border:1px solid #2f67d6; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#153bd4; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3552d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8e9ee6; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3552d9; padding: 18px 40px; color:#8e9ee6;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Qraft Technologies</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Qraft Technologies</span>
<span>Qraft Technologies · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #642fe9; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #642fe9; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b49cf0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #714fd8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #642fe9; color: #ffffff;
border: 1px solid #714fd8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #642fe9; color: #f5f5f5;
border: 1px solid #7b4feb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b49cf0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #6634e6; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#642fe9; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #7b4feb;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#b49cf0; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#b49cf0; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#714fd8; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#642fe9; color:#ffffff;
border:1px solid #714fd8; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#6634e6; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #7b4feb; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#b49cf0; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #7b4feb; padding: 18px 40px; color:#b49cf0;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Queenit</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Queenit</span>
<span>Queenit · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7f7f8; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f7f7f8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fefefe; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f7f7f8; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#000000;
border:1px solid #f7f7f8; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fefefe; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Quora (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Quora (iOS)</span>
<span>Quora (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00e8c5; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00e8c5; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #097262; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #21fce3; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00e8c5; color: #000000;
border: 1px solid #21fce3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00e8c5; color: #111111;
border: 1px solid #03c6a8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #097262; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #05ebca; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00e8c5; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #03c6a8;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#097262; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#097262; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#21fce3; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00e8c5; color:#000000;
border:1px solid #21fce3; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#05ebca; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #03c6a8; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#097262; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #03c6a8; padding: 18px 40px; color:#097262;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Quotabook</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Quotabook</span>
<span>Quotabook · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3d3d3d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #3d3d3d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0a0a0a; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3d3d3d; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #3d3d3d; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0a0a0a; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">RIDI</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© RIDI</span>
<span>RIDI · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f70e0e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f70e0e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f68d8d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fa3e3e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f70e0e; color: #000000;
border: 1px solid #fa3e3e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f70e0e; color: #f5f5f5;
border: 1px solid #f73333; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f68d8d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f71616; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f70e0e; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #f73333;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f68d8d; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f68d8d; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fa3e3e; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f70e0e; color:#000000;
border:1px solid #fa3e3e; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#f71616; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #f73333; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f68d8d; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #f73333; padding: 18px 40px; color:#f68d8d;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Ragic</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Ragic</span>
<span>Ragic · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #bf0000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #bf0000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #dd8787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #134ff3; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #bf0000; color: #ffffff;
border: 1px solid #134ff3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #bf0000; color: #f5f5f5;
border: 1px solid #c82727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #dd8787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #a30d27; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#bf0000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #c82727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#dd8787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#dd8787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#134ff3; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#bf0000; color:#ffffff;
border:1px solid #134ff3; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#a30d27; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #c82727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#dd8787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #c82727; padding: 18px 40px; color:#dd8787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Rakuten</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Rakuten</span>
<span>Rakuten · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e5fe54; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e5fe54; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #707c2f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d4ed3f; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e5fe54; color: #000000;
border: 1px solid #d4ed3f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e5fe54; color: #111111;
border: 1px solid #c3d849; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707c2f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e2fb51; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#e5fe54; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #c3d849;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#707c2f; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#707c2f; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#d4ed3f; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e5fe54; color:#000000;
border:1px solid #d4ed3f; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#e2fb51; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #c3d849; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#707c2f; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #c3d849; padding: 18px 40px; color:#707c2f;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Ramp</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Ramp</span>
<span>Ramp · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#292929; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Raya (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Raya (iOS)</span>
<span>Raya (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5fe0ee; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5fe0ee; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #346e74; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1c1d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5fe0ee; color: #1a1c1d;
border: 1px solid #1a1c1d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5fe0ee; color: #111111;
border: 1px solid #53bfcb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #346e74; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #54c1cd; color: #1a1c1d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#5fe0ee; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #53bfcb;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#346e74; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#346e74; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1a1c1d; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5fe0ee; color:#1a1c1d;
border:1px solid #1a1c1d; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#54c1cd; color:#1a1c1d;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #53bfcb; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#346e74; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #53bfcb; padding: 18px 40px; color:#346e74;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Rayark</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Rayark</span>
<span>Rayark · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #07080a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #07080a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8a8a8b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0d0d0d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #07080a; color: #ffffff;
border: 1px solid #0d0d0d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #07080a; color: #f5f5f5;
border: 1px solid #2d2e30; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8a8b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #08090a; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#07080a; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2d2e30;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8a8a8b; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8a8a8b; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0d0d0d; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#07080a; color:#ffffff;
border:1px solid #0d0d0d; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#08090a; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2d2e30; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8a8a8b; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2d2e30; padding: 18px 40px; color:#8a8a8b;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Raycast</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Raycast</span>
<span>Raycast · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff6363; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff6363; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c3636; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #07080a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6363; color: #07080a;
border: 1px solid #07080a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff6363; color: #111111;
border: 1px solid #d95656; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c3636; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d75455; color: #07080a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff6363; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d95656;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c3636; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c3636; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#07080a; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff6363; color:#07080a;
border:1px solid #07080a; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d75455; color:#07080a;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d95656; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c3636; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d95656; padding: 18px 40px; color:#7c3636;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Raycast</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Raycast</span>
<span>Raycast · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #40c8f7; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #40c8f7; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #266378; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0092c2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #40c8f7; color: #000000;
border: 1px solid #0092c2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #40c8f7; color: #111111;
border: 1px solid #38abd2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #266378; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #36bfef; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#40c8f7; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #38abd2;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#266378; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#266378; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0092c2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#40c8f7; color:#000000;
border:1px solid #0092c2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#36bfef; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #38abd2; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#266378; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #38abd2; padding: 18px 40px; color:#266378;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Readmoo</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Readmoo</span>
<span>Readmoo · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #52f756; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #52f756; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #2e7830; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #24292e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #52f756; color: #24292e;
border: 1px solid #24292e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #52f756; color: #111111;
border: 1px solid #48d24b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #2e7830; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4bd650; color: #24292e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#52f756; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #48d24b;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#2e7830; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#2e7830; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#24292e; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#52f756; color:#24292e;
border:1px solid #24292e; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#4bd650; color:#24292e;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #48d24b; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#2e7830; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #48d24b; padding: 18px 40px; color:#2e7830;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Rebellions</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Rebellions</span>
<span>Rebellions · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0065bd; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0065bd; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b4dc; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2d3133; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0065bd; color: #ffffff;
border: 1px solid #2d3133; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0065bd; color: #f5f5f5;
border: 1px solid #277cc6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b4dc; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #075da7; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0065bd; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #277cc6;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87b4dc; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87b4dc; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2d3133; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0065bd; color:#ffffff;
border:1px solid #2d3133; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#075da7; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #277cc6; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87b4dc; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #277cc6; padding: 18px 40px; color:#87b4dc;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Recruit</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Recruit</span>
<span>Recruit · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4500; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4500; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faa687; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d93900; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4500; color: #000000;
border: 1px solid #d93900; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4500; color: #f5f5f5;
border: 1px solid #fd6127; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faa687; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f94300; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff4500; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd6127;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#faa687; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#faa687; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#d93900; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff4500; color:#000000;
border:1px solid #d93900; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#f94300; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd6127; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#faa687; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd6127; padding: 18px 40px; color:#faa687;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Reddit</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Reddit</span>
<span>Reddit · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4500; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4500; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faa687; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff8717; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4500; color: #000000;
border: 1px solid #ff8717; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4500; color: #f5f5f5;
border: 1px solid #fd6127; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faa687; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff5004; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff4500; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd6127;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#faa687; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#faa687; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff8717; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff4500; color:#000000;
border:1px solid #ff8717; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ff5004; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd6127; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#faa687; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd6127; padding: 18px 40px; color:#faa687;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Reddit (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Reddit (iOS)</span>
<span>Reddit (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#292929; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Remember</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Remember</span>
<span>Remember · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffcc00; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffcc00; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6509; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #efdf00; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffcc00; color: #000000;
border: 1px solid #efdf00; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffcc00; color: #111111;
border: 1px solid #d9ae03; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6509; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fccf00; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffcc00; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9ae03;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c6509; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c6509; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#efdf00; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffcc00; color:#000000;
border:1px solid #efdf00; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fccf00; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9ae03; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c6509; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9ae03; padding: 18px 40px; color:#7c6509;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Renault</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Renault</span>
<span>Renault · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 0.95; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14.4px; font-weight: 700; line-height: 1.0; letter-spacing: 0.144px; background: #ffed00; color: #000000;
border: none; border-radius: 2px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14.4px; font-weight: 700; line-height: 1.0; letter-spacing: 0.144px; background: #000000; color: #ffffff;
border: 1px solid #ffed00; border-radius: 2px;
padding: 14px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; background: #ffffff; color: #000000;
border: 1px solid #bfbfbf; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.0; letter-spacing: 0.144px; background: #ffed00; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dbdbdb;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 0.95; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; display:flex; gap:28px; color:#666666; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 40px; font-weight: 700; line-height: 0.95; margin:0; max-width:640px; color:#000000; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin:0; max-width:520px; color:#666666; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14.4px; font-weight: 700; line-height: 1.0; letter-spacing: 0.144px; background:#ffed00; color:#000000;
border:none; border-radius:2px; padding:14px 24px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14.4px; font-weight: 700; line-height: 1.0; letter-spacing: 0.144px; background:#000000; color:#ffffff;
border:1px solid #ffed00; border-radius:2px;
padding:14px 24px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.0; letter-spacing: 0.144px; background:#ffed00; color:#000000;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dbdbdb; border-radius: 2px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 0.95; font-size: 16px; margin:0; color:#000000; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin:0; color:#666666; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; border-top:1px solid #dbdbdb; padding: 18px 40px; color:#666666;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Renault</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Renault</span>
<span>Renault · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fc7676; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fc7676; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7b3e3e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #202020; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fc7676; color: #202020;
border: 1px solid #202020; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fc7676; color: #111111;
border: 1px solid #d66666; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b3e3e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d96868; color: #202020;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fc7676; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d66666;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7b3e3e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7b3e3e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#202020; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fc7676; color:#202020;
border:1px solid #202020; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d96868; color:#202020;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d66666; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7b3e3e; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d66666; padding: 18px 40px; color:#7b3e3e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Replicate</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Replicate</span>
<span>Replicate · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f7f3; color: #202020;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f7f3; color: #202020;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.35px; margin: 0; color: #202020; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #646464; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.0; background: #ea2804; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.0; background: #ffffff; color: #202020;
border: 1px solid #ea2804; border-radius: 9999px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #202020;
border: 1px solid #c3c1be; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #646464; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.33; background: #2b9a66; color: #fcfcfc;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9f7f3; color:#202020; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dbd9d5;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.35px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; display:flex; gap:28px; color:#646464; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 38.4px; font-weight: 600; line-height: 0.83; letter-spacing: -0.5px; margin:0; max-width:640px; color:#202020; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin:0; max-width:520px; color:#646464; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.0; background:#ea2804; color:#ffffff;
border:none; border-radius:9999px; padding:12px 24px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.0; background:#ffffff; color:#202020;
border:1px solid #ea2804; border-radius:9999px;
padding:11px 23px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.33; background:#2b9a66; color:#fcfcfc;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dbd9d5; border-radius: 12px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.35px; font-size: 16px; margin:0; color:#202020; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin:0; color:#646464; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; border-top:1px solid #dbd9d5; padding: 18px 40px; color:#646464;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Replicate</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Replicate</span>
<span>Replicate · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00a3ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00a3ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d0fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a3ff; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00a3ff; color: #f5f5f5;
border: 1px solid #27b0fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d0fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e99fd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00a3ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27b0fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87d0fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87d0fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00a3ff; color:#000000;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0e99fd; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27b0fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87d0fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27b0fd; padding: 18px 40px; color:#87d0fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Resend</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Resend</span>
<span>Resend · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #fcfdff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #fcfdff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.5; letter-spacing: -0.4px; margin: 0; color: #fcfdff; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.6; margin: 0; color: #a1a4a5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; background: #fcfdff; color: #000000;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; background: #000000; color: #fcfdff;
border: 1px solid #fcfdff; border-radius: 8px;
padding: 7px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #0a0a0c; color: #fcfdff;
border: 1px solid #3f3f40; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a1a4a5; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.5; background: #101012; color: rgba(252,253,255,0.86);
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#fcfdff; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #232324;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.5; letter-spacing: -0.4px; font-size: 18px; margin:0; }
.navlinks { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.6; display:flex; gap:28px; color:#a1a4a5; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 400; line-height: 1.2; letter-spacing: -2.8px; margin:0; max-width:640px; color:#fcfdff; }
.hero p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.6; margin:0; max-width:520px; color:#a1a4a5; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; background:#fcfdff; color:#000000;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; background:#000000; color:#fcfdff;
border:1px solid #fcfdff; border-radius:8px;
padding:7px 15px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.5; background:#101012; color:rgba(252,253,255,0.86);
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #232324; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.5; letter-spacing: -0.4px; font-size: 16px; margin:0; color:#fcfdff; }
.feature-card p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.6; margin:0; color:#a1a4a5; }
footer {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.6; border-top:1px solid #232324; padding: 18px 40px; color:#a1a4a5;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Resend</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Resend</span>
<span>Resend · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c73e3a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #c73e3a;
border: 1px solid #c73e3a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #200a09; color: #c73e3a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#c73e3a; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#c73e3a;
border:1px solid #c73e3a; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#200a09; color:#c73e3a;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Resy (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Resy (iOS)</span>
<span>Resy (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3c3c3c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3c3c3c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a2a2a2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3c3c3c; color: #ffffff;
border: 1px solid #1a1a1a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3c3c3c; color: #f5f5f5;
border: 1px solid #5a5a5a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a2a2a2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #373737; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#3c3c3c; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #5a5a5a;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#a2a2a2; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#a2a2a2; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1a1a1a; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3c3c3c; color:#ffffff;
border:1px solid #1a1a1a; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#373737; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #5a5a5a; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#a2a2a2; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #5a5a5a; padding: 18px 40px; color:#a2a2a2;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Retool</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Retool</span>
<span>Retool · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #222222; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #222222; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #969696; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #98ffac; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #222222; color: #98ffac;
border: 1px solid #98ffac; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #222222; color: #f5f5f5;
border: 1px solid #444444; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #969696; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #354538; color: #98ffac;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#222222; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #444444;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#969696; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#969696; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#98ffac; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#222222; color:#98ffac;
border:1px solid #98ffac; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#354538; color:#98ffac;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #444444; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#969696; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #444444; padding: 18px 40px; color:#969696;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Return Zero</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Return Zero</span>
<span>Return Zero · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #494fdf; color: #191c1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #494fdf; color: #191c1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #191c1f; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #505a63; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.5; letter-spacing: 0.24px; background: #ffffff; color: #000000;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.5; letter-spacing: 0.24px; background: #ffffff; color: #191c1f;
border: 1px solid #494fdf; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0.24px; background: #ffffff; color: #191c1f;
border: 1px solid #3d42af; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #505a63; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; background: #f4f4f4; color: #191c1f;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#494fdf; color:#191c1f; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #4248c4;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; display:flex; gap:28px; color:#505a63; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 40px; font-weight: 500; line-height: 1.2; letter-spacing: -0.4px; margin:0; max-width:640px; color:#191c1f; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin:0; max-width:520px; color:#505a63; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.5; letter-spacing: 0.24px; background:#ffffff; color:#000000;
border:none; border-radius:9999px; padding:14px 28px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.5; letter-spacing: 0.24px; background:#ffffff; color:#191c1f;
border:1px solid #494fdf; border-radius:9999px;
padding:13px 27px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; background:#f4f4f4; color:#191c1f;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #4248c4; border-radius: 12px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; font-size: 16px; margin:0; color:#191c1f; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin:0; color:#505a63; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; border-top:1px solid #4248c4; padding: 18px 40px; color:#505a63;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Revolut</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Revolut</span>
<span>Revolut · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0075eb; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0075eb; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bbf0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #191c1f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0075eb; color: #191c1f;
border: 1px solid #191c1f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0075eb; color: #f5f5f5;
border: 1px solid #2789ed; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bbf0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0467ca; color: #191c1f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0075eb; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2789ed;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87bbf0; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87bbf0; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#191c1f; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0075eb; color:#191c1f;
border:1px solid #191c1f; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0467ca; color:#191c1f;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2789ed; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87bbf0; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2789ed; padding: 18px 40px; color:#87bbf0;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Revolut</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Revolut</span>
<span>Revolut · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a0f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a0f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8b8b8e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5b6bff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0a0f; color: #5b6bff;
border: 1px solid #5b6bff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a0a0f; color: #f5f5f5;
border: 1px solid #303034; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8b8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #171a35; color: #5b6bff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0a0a0f; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #303034;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8b8b8e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8b8b8e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5b6bff; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0a0a0f; color:#5b6bff;
border:1px solid #5b6bff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#171a35; color:#5b6bff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #303034; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8b8b8e; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #303034; padding: 18px 40px; color:#8b8b8e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Revolut (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Revolut (iOS)</span>
<span>Revolut (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #17b6c9; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #17b6c9; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #91d9e1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2be0ec; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #17b6c9; color: #000000;
border: 1px solid #2be0ec; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #17b6c9; color: #000000;
border: 1px solid #3bc0d0; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #91d9e1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1abdcf; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#17b6c9; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3bc0d0;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#91d9e1; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#91d9e1; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2be0ec; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#17b6c9; color:#000000;
border:1px solid #2be0ec; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#1abdcf; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3bc0d0; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#91d9e1; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3bc0d0; padding: 18px 40px; color:#91d9e1;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Richart</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Richart</span>
<span>Richart · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #14161a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #14161a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #909192; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fcfcfc; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #14161a; color: #fcfcfc;
border: 1px solid #fcfcfc; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #14161a; color: #f5f5f5;
border: 1px solid #383a3d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #909192; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #393b3e; color: #fcfcfc;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#14161a; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #383a3d;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#909192; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#909192; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fcfcfc; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#14161a; color:#fcfcfc;
border:1px solid #fcfcfc; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#393b3e; color:#fcfcfc;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #383a3d; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#909192; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #383a3d; padding: 18px 40px; color:#909192;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Riiid</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Riiid</span>
<span>Riiid · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3c2bac; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3c2bac; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a29ad4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2b1e90; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3c2bac; color: #ffffff;
border: 1px solid #2b1e90; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3c2bac; color: #f5f5f5;
border: 1px solid #5a4bb8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a29ad4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3929a8; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#3c2bac; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #5a4bb8;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#a29ad4; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#a29ad4; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2b1e90; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3c2bac; color:#ffffff;
border:1px solid #2b1e90; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#3929a8; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #5a4bb8; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#a29ad4; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #5a4bb8; padding: 18px 40px; color:#a29ad4;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Ringle</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Ringle</span>
<span>Ringle · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00c805; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00c805; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87e189; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00b004; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00c805; color: #000000;
border: 1px solid #00b004; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00c805; color: #000000;
border: 1px solid #27cf2b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87e189; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00c405; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00c805; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27cf2b;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87e189; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87e189; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00b004; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00c805; color:#000000;
border:1px solid #00b004; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#00c405; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27cf2b; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87e189; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27cf2b; padding: 18px 40px; color:#87e189;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Robinhood</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Robinhood</span>
<span>Robinhood · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00c805; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00c805; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87e189; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00c805; color: #000000;
border: 1px solid #ff5000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00c805; color: #000000;
border: 1px solid #27cf2b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87e189; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #29b504; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00c805; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27cf2b;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87e189; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87e189; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff5000; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00c805; color:#000000;
border:1px solid #ff5000; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#29b504; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27cf2b; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87e189; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27cf2b; padding: 18px 40px; color:#87e189;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Robinhood (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Robinhood (iOS)</span>
<span>Robinhood (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0e0e16; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0e0e16; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d8d91; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #181826; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e0e16; color: #ffffff;
border: 1px solid #181826; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0e0e16; color: #f5f5f5;
border: 1px solid #33333a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8d91; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #101019; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0e0e16; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #33333a;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8d8d91; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8d8d91; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#181826; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0e0e16; color:#ffffff;
border:1px solid #181826; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#101019; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #33333a; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8d8d91; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #33333a; padding: 18px 40px; color:#8d8d91;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Runna (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Runna (iOS)</span>
<span>Runna (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #767d88; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #767d88; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #bcbfc4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7d848e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #767d88; color: #000000;
border: 1px solid #7d848e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #767d88; color: #f5f5f5;
border: 1px solid #8a9099; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bcbfc4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #777e89; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#767d88; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #8a9099;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#bcbfc4; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#bcbfc4; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#7d848e; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#767d88; color:#000000;
border:1px solid #7d848e; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#777e89; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #8a9099; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#bcbfc4; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #8a9099; padding: 18px 40px; color:#bcbfc4;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Runway</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Runway</span>
<span>Runway · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #030303; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #030303; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #000000; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#030303; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #030303; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#000000; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">RunwayML</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© RunwayML</span>
<span>RunwayML · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5577; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5577; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faadbc; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5577; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5577; color: #f5f5f5;
border: 1px solid #fd6f8b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faadbc; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff708d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff5577; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd6f8b;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#faadbc; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#faadbc; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff5577; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ff708d; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd6f8b; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#faadbc; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd6f8b; padding: 18px 40px; color:#faadbc;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">SAKURA internet</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© SAKURA internet</span>
<span>SAKURA internet · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #356dff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #356dff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9fb8fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00142d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #356dff; color: #00142d;
border: 1px solid #00142d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #356dff; color: #f5f5f5;
border: 1px solid #5483fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9fb8fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2d5fdd; color: #00142d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#356dff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #5483fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#9fb8fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#9fb8fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00142d; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#356dff; color:#00142d;
border:1px solid #00142d; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2d5fdd; color:#00142d;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #5483fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#9fb8fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #5483fd; padding: 18px 40px; color:#9fb8fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">SHOPLINE</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© SHOPLINE</span>
<span>SHOPLINE · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #007ff5; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #007ff5; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87c0f5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3b4043; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #007ff5; color: #3b4043;
border: 1px solid #3b4043; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #007ff5; color: #f5f5f5;
border: 1px solid #2792f5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87c0f5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0975d9; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#007ff5; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2792f5;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87c0f5; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87c0f5; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3b4043; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#007ff5; color:#3b4043;
border:1px solid #3b4043; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0975d9; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2792f5; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87c0f5; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2792f5; padding: 18px 40px; color:#87c0f5;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">SIONIC AI</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© SIONIC AI</span>
<span>SIONIC AI · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3a46cd; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3a46cd; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a1a6e3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a2232; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3a46cd; color: #ffffff;
border: 1px solid #1a2232; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3a46cd; color: #f5f5f5;
border: 1px solid #5862d3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a1a6e3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3540b4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#3a46cd; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #5862d3;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#a1a6e3; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#a1a6e3; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1a2232; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3a46cd; color:#ffffff;
border:1px solid #1a2232; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#3540b4; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #5862d3; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#a1a6e3; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #5862d3; padding: 18px 40px; color:#a1a6e3;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">SK Telecom</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© SK Telecom</span>
<span>SK Telecom · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0078ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0078ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bdfa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0078ff; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0078ff; color: #f5f5f5;
border: 1px solid #278cfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bdfa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #298eff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0078ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #278cfd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87bdfa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87bdfa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0078ff; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#298eff; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #278cfd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87bdfa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #278cfd; padding: 18px 40px; color:#87bdfa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">SOCAR</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© SOCAR</span>
<span>SOCAR · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #4541ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #4541ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a6a4fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #333333; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4541ff; color: #ffffff;
border: 1px solid #333333; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #4541ff; color: #f5f5f5;
border: 1px solid #615efd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a6a4fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #423fde; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#4541ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #615efd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#a6a4fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#a6a4fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#333333; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#4541ff; color:#ffffff;
border:1px solid #333333; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#423fde; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #615efd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#a6a4fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #615efd; padding: 18px 40px; color:#a6a4fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">SOLAPI</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© SOLAPI</span>
<span>SOLAPI · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0182ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0182ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87c1fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f6f6f9; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0182ff; color: #f6f6f9;
border: 1px solid #f6f6f9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0182ff; color: #f5f5f5;
border: 1px solid #2894fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87c1fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2895fe; color: #f6f6f9;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0182ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2894fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87c1fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87c1fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f6f6f9; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0182ff; color:#f6f6f9;
border:1px solid #f6f6f9; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2895fe; color:#f6f6f9;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2894fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87c1fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2894fd; padding: 18px 40px; color:#87c1fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">SOOP</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© SOOP</span>
<span>SOOP · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e60f3d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e60f3d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ee8ea2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d30030; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e60f3d; color: #ffffff;
border: 1px solid #d30030; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e60f3d; color: #f5f5f5;
border: 1px solid #e8345a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ee8ea2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e30d3b; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#e60f3d; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #e8345a;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#ee8ea2; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#ee8ea2; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#d30030; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e60f3d; color:#ffffff;
border:1px solid #d30030; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#e30d3b; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #e8345a; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#ee8ea2; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #e8345a; padding: 18px 40px; color:#ee8ea2;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">SPEEDA (Uzabase)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© SPEEDA (Uzabase)</span>
<span>SPEEDA (Uzabase) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5452; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5452; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faadac; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f5f5f5; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5452; color: #f5f5f5;
border: 1px solid #f5f5f5; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5452; color: #f5f5f5;
border: 1px solid #fd6e6c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faadac; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fd6e6c; color: #f5f5f5;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff5452; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd6e6c;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#faadac; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#faadac; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f5f5f5; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff5452; color:#f5f5f5;
border:1px solid #f5f5f5; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fd6e6c; color:#f5f5f5;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd6e6c; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#faadac; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd6e6c; padding: 18px 40px; color:#faadac;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">SSG.COM</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© SSG.COM</span>
<span>SSG.COM · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0066ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0066ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b5fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fafaf8; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0066ff; color: #fafaf8;
border: 1px solid #fafaf8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0066ff; color: #f5f5f5;
border: 1px solid #277dfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b5fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #287efe; color: #fafaf8;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0066ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #277dfd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87b5fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87b5fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fafaf8; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0066ff; color:#fafaf8;
border:1px solid #fafaf8; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#287efe; color:#fafaf8;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #277dfd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87b5fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #277dfd; padding: 18px 40px; color:#87b5fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">STORES</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© STORES</span>
<span>STORES · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0176d3; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0176d3; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bce6; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b5cab; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0176d3; color: #ffffff;
border: 1px solid #0b5cab; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0176d3; color: #f5f5f5;
border: 1px solid #288ad8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bce6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0372cd; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0176d3; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #288ad8;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87bce6; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87bce6; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0b5cab; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0176d3; color:#ffffff;
border:1px solid #0b5cab; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0372cd; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #288ad8; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87bce6; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #288ad8; padding: 18px 40px; color:#87bce6;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Salesforce</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Salesforce</span>
<span>Salesforce · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#292929; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Samsung</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Samsung</span>
<span>Samsung · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff0600; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff0600; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fa8987; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1c1c1c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff0600; color: #1c1c1c;
border: 1px solid #1c1c1c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff0600; color: #f5f5f5;
border: 1px solid #fd2c27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fa8987; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #db0a04; color: #1c1c1c;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff0600; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd2c27;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#fa8987; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#fa8987; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1c1c1c; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff0600; color:#1c1c1c;
border:1px solid #1c1c1c; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#db0a04; color:#1c1c1c;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd2c27; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#fa8987; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd2c27; padding: 18px 40px; color:#fa8987;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Sandoll</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Sandoll</span>
<span>Sandoll · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5500; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5500; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faad87; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5500; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5500; color: #f5f5f5;
border: 1px solid #fd6f27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faad87; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff7029; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff5500; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd6f27;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#faad87; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#faad87; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff5500; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ff7029; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd6f27; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#faad87; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd6f27; padding: 18px 40px; color:#faad87;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Sanity</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Sanity</span>
<span>Sanity · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0b0b0b; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0b0b0b; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8c8c8c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #212121; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b0b0b; color: #ffffff;
border: 1px solid #212121; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0b0b0b; color: #f5f5f5;
border: 1px solid #303030; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8c8c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0f0f0f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0b0b0b; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #303030;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8c8c8c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8c8c8c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#212121; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0b0b0b; color:#ffffff;
border:1px solid #212121; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0f0f0f; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #303030; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8c8c8c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #303030; padding: 18px 40px; color:#8c8c8c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Sanity</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Sanity</span>
<span>Sanity · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e60012; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e60012; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ee878f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #cc0010; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e60012; color: #ffffff;
border: 1px solid #cc0010; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e60012; color: #f5f5f5;
border: 1px solid #e82736; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ee878f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e20012; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#e60012; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #e82736;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#ee878f; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#ee878f; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#cc0010; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e60012; color:#ffffff;
border:1px solid #cc0010; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#e20012; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #e82736; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#ee878f; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #e82736; padding: 18px 40px; color:#ee878f;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Sansan</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Sansan</span>
<span>Sansan · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #4876ef; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #4876ef; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a7bcf2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2d67ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4876ef; color: #000000;
border: 1px solid #2d67ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #4876ef; color: #f5f5f5;
border: 1px solid #648af0; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a7bcf2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4474f2; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#4876ef; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #648af0;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#a7bcf2; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#a7bcf2; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2d67ff; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#4876ef; color:#000000;
border:1px solid #2d67ff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#4474f2; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #648af0; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#a7bcf2; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #648af0; padding: 18px 40px; color:#a7bcf2;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Saramin</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Saramin</span>
<span>Saramin · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #212529; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #212529; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #969799; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #212529; color: #ffffff;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #212529; color: #f5f5f5;
border: 1px solid #43464a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #969799; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1c1f22; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#212529; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #43464a;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#969799; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#969799; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#212529; color:#ffffff;
border:1px solid #000000; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#1c1f22; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #43464a; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#969799; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #43464a; padding: 18px 40px; color:#969799;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Scatter Lab</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Scatter Lab</span>
<span>Scatter Lab · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0c5fdb; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0c5fdb; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8cb2e9; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1274e7; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0c5fdb; color: #ffffff;
border: 1px solid #1274e7; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0c5fdb; color: #f5f5f5;
border: 1px solid #3177df; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8cb2e9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0d62dd; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0c5fdb; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3177df;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8cb2e9; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8cb2e9; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1274e7; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0c5fdb; color:#ffffff;
border:1px solid #1274e7; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0d62dd; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3177df; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8cb2e9; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3177df; padding: 18px 40px; color:#8cb2e9;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Selectstar</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Selectstar</span>
<span>Selectstar · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #742ddd; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #742ddd; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #bb9bea; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #6211c8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #742ddd; color: #ffffff;
border: 1px solid #6211c8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #742ddd; color: #f5f5f5;
border: 1px solid #894de1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bb9bea; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #7129da; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#742ddd; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #894de1;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#bb9bea; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#bb9bea; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#6211c8; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#742ddd; color:#ffffff;
border:1px solid #6211c8; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#7129da; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #894de1; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#bb9bea; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #894de1; padding: 18px 40px; color:#bb9bea;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Sendbird</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Sendbird</span>
<span>Sendbird · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #150f23; color: #1f1633;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #150f23; color: #1f1633;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0; color: #1f1633; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; margin: 0; color: #bdb8c0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.14; letter-spacing: 0.2px; background: #150f23; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.14; letter-spacing: 0.2px; background: #3f3849; color: #ffffff;
border: 1px solid #150f23; border-radius: 12px;
padding: 8px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.5; background: #ffffff; color: #1f1633;
border: 1px solid #181127; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bdb8c0; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; background: #c2ef4e; color: #1f1633;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#150f23; color:#1f1633; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #161025;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; display:flex; gap:28px; color:#bdb8c0; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 30px; font-weight: 500; line-height: 1.2; margin:0; max-width:640px; color:#1f1633; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; margin:0; max-width:520px; color:#bdb8c0; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.14; letter-spacing: 0.2px; background:#150f23; color:#ffffff;
border:none; border-radius:8px; padding:12px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.14; letter-spacing: 0.2px; background:#3f3849; color:#ffffff;
border:1px solid #150f23; border-radius:12px;
padding:8px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; background:#c2ef4e; color:#1f1633;
border-radius:4px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #161025; border-radius: 12px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; font-size: 16px; margin:0; color:#1f1633; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; margin:0; color:#bdb8c0; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; border-top:1px solid #161025; padding: 18px 40px; color:#bdb8c0;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Sentry</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Sentry</span>
<span>Sentry · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #362d59; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #362d59; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9f9baf; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #79628c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #362d59; color: #ffffff;
border: 1px solid #79628c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #362d59; color: #f5f5f5;
border: 1px solid #554d72; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9f9baf; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #413561; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#362d59; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #554d72;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#9f9baf; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#9f9baf; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#79628c; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#362d59; color:#ffffff;
border:1px solid #79628c; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#413561; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #554d72; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#9f9baf; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #554d72; padding: 18px 40px; color:#9f9baf;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Sentry</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Sentry</span>
<span>Sentry · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #102c40; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #102c40; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8e9ba4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #102c40; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #102c40; color: #f5f5f5;
border: 1px solid #354c5d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e9ba4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #364e5f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#102c40; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #354c5d;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8e9ba4; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8e9ba4; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#102c40; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#364e5f; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #354c5d; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8e9ba4; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #354c5d; padding: 18px 40px; color:#8e9ba4;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">ServiceNow Horizon</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© ServiceNow Horizon</span>
<span>ServiceNow Horizon · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0088ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0088ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87c4fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0050ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0088ff; color: #000000;
border: 1px solid #0050ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0088ff; color: #f5f5f5;
border: 1px solid #2799fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87c4fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #007fff; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0088ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2799fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87c4fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87c4fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0050ff; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0088ff; color:#000000;
border:1px solid #0050ff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#007fff; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2799fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87c4fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2799fd; padding: 18px 40px; color:#87c4fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Shazam (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Shazam (iOS)</span>
<span>Shazam (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #569a43; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #569a43; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #adcca5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #569a43; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #569a43; color: #f5f5f5;
border: 1px solid #6fa95f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #adcca5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #488138; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#569a43; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #6fa95f;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#adcca5; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#adcca5; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#569a43; color:#000000;
border:1px solid #000000; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#488138; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #6fa95f; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#adcca5; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #6fa95f; padding: 18px 40px; color:#adcca5;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Shift Up</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Shift Up</span>
<span>Shift Up · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #004dc1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #004dc1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87a9de; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a2864; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #004dc1; color: #ffffff;
border: 1px solid #0a2864; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #004dc1; color: #f5f5f5;
border: 1px solid #2768c9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87a9de; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0247b2; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#004dc1; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2768c9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87a9de; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87a9de; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0a2864; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#004dc1; color:#ffffff;
border:1px solid #0a2864; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0247b2; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2768c9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87a9de; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2768c9; padding: 18px 40px; color:#87a9de;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Shiftee</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Shiftee</span>
<span>Shiftee · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0046ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0046ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87a6fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #005df9; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0046ff; color: #ffffff;
border: 1px solid #005df9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0046ff; color: #f5f5f5;
border: 1px solid #2762fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87a6fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #004afe; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0046ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2762fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87a6fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87a6fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#005df9; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0046ff; color:#ffffff;
border:1px solid #005df9; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#004afe; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2762fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87a6fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2762fd; padding: 18px 40px; color:#87a6fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Shinhan Bank</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Shinhan Bank</span>
<span>Shinhan Bank · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #005df9; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #005df9; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b1f7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #005df9; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #005df9; color: #f5f5f5;
border: 1px solid #2775f8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b1f7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2977fa; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#005df9; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2775f8;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87b1f7; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87b1f7; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#005df9; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2977fa; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2775f8; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87b1f7; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2775f8; padding: 18px 40px; color:#87b1f7;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Shinhan Card</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Shinhan Card</span>
<span>Shinhan Card · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.14; letter-spacing: 0.36px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.2; letter-spacing: 0.72px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 420; line-height: 1.5; background: #000000; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 420; line-height: 1.5; background: #000000; color: #ffffff;
border: 1px solid #000000; border-radius: 9999px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 420; line-height: 1.5; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.2; letter-spacing: 0.72px; background: #c1fbd4; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#000000; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #000000;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.14; letter-spacing: 0.36px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.2; letter-spacing: 0.72px; display:flex; gap:28px; color:#000000; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 330; line-height: 1.14; margin:0; max-width:640px; color:#000000; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.2; letter-spacing: 0.72px; margin:0; max-width:520px; color:#000000; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 420; line-height: 1.5; background:#000000; color:#ffffff;
border:none; border-radius:9999px; padding:12px 24px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 420; line-height: 1.5; background:#000000; color:#ffffff;
border:1px solid #000000; border-radius:9999px;
padding:12px 26px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.2; letter-spacing: 0.72px; background:#c1fbd4; color:#000000;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #000000; border-radius: 12px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.14; letter-spacing: 0.36px; font-size: 16px; margin:0; color:#000000; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.2; letter-spacing: 0.72px; margin:0; color:#000000; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.2; letter-spacing: 0.72px; border-top:1px solid #000000; padding: 18px 40px; color:#000000;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Shopify</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Shopify</span>
<span>Shopify · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1b1b1b; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #1b1b1b;
border: 1px solid #1b1b1b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dbdbdb; color: #1b1b1b;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1b1b1b; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#1b1b1b;
border:1px solid #1b1b1b; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#dbdbdb; color:#1b1b1b;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Signal (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Signal (iOS)</span>
<span>Signal (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #001339; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #001339; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878fa0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #222222; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #001339; color: #ffffff;
border: 1px solid #222222; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #001339; color: #f5f5f5;
border: 1px solid #273757; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878fa0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #051535; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#001339; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #273757;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878fa0; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878fa0; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#222222; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#001339; color:#ffffff;
border:1px solid #222222; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#051535; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #273757; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878fa0; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #273757; padding: 18px 40px; color:#878fa0;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Sinsang Market (Dealicious)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Sinsang Market (Dealicious)</span>
<span>Sinsang Market (Dealicious) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00aff0; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00aff0; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d6f3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0078d4; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00aff0; color: #000000;
border: 1px solid #0078d4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00aff0; color: #000000;
border: 1px solid #27baf1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d6f3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00a6ec; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00aff0; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27baf1;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87d6f3; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87d6f3; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0078d4; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00aff0; color:#000000;
border:1px solid #0078d4; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#00a6ec; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27baf1; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87d6f3; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27baf1; padding: 18px 40px; color:#87d6f3;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Skype (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Skype (iOS)</span>
<span>Skype (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0062e3; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0062e3; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b3ed; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #05203c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0062e3; color: #05203c;
border: 1px solid #05203c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0062e3; color: #f5f5f5;
border: 1px solid #277ae6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b3ed; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0157c8; color: #05203c;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0062e3; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #277ae6;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87b3ed; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87b3ed; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#05203c; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0062e3; color:#05203c;
border:1px solid #05203c; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0157c8; color:#05203c;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #277ae6; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87b3ed; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #277ae6; padding: 18px 40px; color:#87b3ed;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Skyscanner</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Skyscanner</span>
<span>Skyscanner · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0770e3; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #0770e3;
border: 1px solid #0770e3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d7e8fb; color: #0770e3;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0770e3; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#0770e3;
border:1px solid #0770e3; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d7e8fb; color:#0770e3;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Skyscanner (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Skyscanner (iOS)</span>
<span>Skyscanner (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #4a154b; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #4a154b; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a890a8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #611f69; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4a154b; color: #ffffff;
border: 1px solid #611f69; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #4a154b; color: #f5f5f5;
border: 1px solid #653966; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a890a8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4e1750; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#4a154b; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #653966;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#a890a8; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#a890a8; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#611f69; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#4a154b; color:#ffffff;
border:1px solid #611f69; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#4e1750; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #653966; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#a890a8; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #653966; padding: 18px 40px; color:#a890a8;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Slack</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Slack</span>
<span>Slack · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d1d1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d1d1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.4; margin: 0; color: #1d1d1d; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.55; margin: 0; color: #696969; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.38; letter-spacing: 0.2px; background: #4a154b; color: #ffffff;
border: none; border-radius: 90px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.38; letter-spacing: 0.2px; background: #f9f0ff; color: #1d1d1d;
border: 1px solid #4a154b; border-radius: 90px;
padding: 10px 30px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #1d1d1d;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #696969; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #e6dee6; color: #4a154b;
border-radius: 90px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1d1d1d; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dfdfdf;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.4; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.55; display:flex; gap:28px; color:#696969; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.25; letter-spacing: -0.256px; margin:0; max-width:640px; color:#1d1d1d; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.55; margin:0; max-width:520px; color:#696969; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.38; letter-spacing: 0.2px; background:#4a154b; color:#ffffff;
border:none; border-radius:90px; padding:14px 28px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.38; letter-spacing: 0.2px; background:#f9f0ff; color:#1d1d1d;
border:1px solid #4a154b; border-radius:90px;
padding:10px 30px; white-space:nowrap; cursor:default;
}
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background:#e6dee6; color:#4a154b;
border-radius:90px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dfdfdf; border-radius: 90px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.4; font-size: 16px; margin:0; color:#1d1d1d; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.55; margin:0; color:#696969; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.55; border-top:1px solid #dfdfdf; padding: 18px 40px; color:#696969;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Slack</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Slack</span>
<span>Slack · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #4a154b; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #4a154b; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a890a8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4a154b; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #4a154b; color: #f5f5f5;
border: 1px solid #653966; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a890a8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #673a68; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#4a154b; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #653966;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#a890a8; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#a890a8; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#4a154b; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#673a68; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #653966; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#a890a8; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #653966; padding: 18px 40px; color:#a890a8;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Slack (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Slack (iOS)</span>
<span>Slack (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2a2d5a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2a2d5a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9a9baf; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3b4371; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2a2d5a; color: #ffffff;
border: 1px solid #3b4371; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2a2d5a; color: #f5f5f5;
border: 1px solid #4a4d73; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a9baf; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2d315e; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#2a2d5a; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #4a4d73;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#9a9baf; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#9a9baf; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3b4371; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2a2d5a; color:#ffffff;
border:1px solid #3b4371; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2d315e; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #4a4d73; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#9a9baf; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #4a4d73; padding: 18px 40px; color:#9a9baf;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Sleep Cycle (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Sleep Cycle (iOS)</span>
<span>Sleep Cycle (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00c4cc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00c4cc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87dfe3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00c4cc; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00c4cc; color: #000000;
border: 1px solid #27ccd3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87dfe3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #29cdd4; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00c4cc; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27ccd3;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87dfe3; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87dfe3; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00c4cc; color:#000000;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#29cdd4; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27ccd3; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87dfe3; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27ccd3; padding: 18px 40px; color:#87dfe3;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">SmartHR</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© SmartHR</span>
<span>SmartHR · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eb0b22; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eb0b22; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f08c96; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #eb0b22; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #eb0b22; color: #f5f5f5;
border: 1px solid #ed3044; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f08c96; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ee3245; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#eb0b22; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #ed3044;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f08c96; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f08c96; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#eb0b22; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ee3245; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #ed3044; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f08c96; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #ed3044; padding: 18px 40px; color:#f08c96;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">SmartNews</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© SmartNews</span>
<span>SmartNews · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffc00; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffc00; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7b09; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0096e5; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fffc00; color: #0096e5;
border: 1px solid #0096e5; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fffc00; color: #111111;
border: 1px solid #d9d603; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7b09; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6ec25; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fffc00; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d603;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7b09; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7b09; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0096e5; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fffc00; color:#0096e5;
border:1px solid #0096e5; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d6ec25; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d603; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7b09; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d603; padding: 18px 40px; color:#7c7b09;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Snapchat</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Snapchat</span>
<span>Snapchat · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffc00; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffc00; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7b09; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e6e300; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fffc00; color: #000000;
border: 1px solid #e6e300; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fffc00; color: #111111;
border: 1px solid #d9d603; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7b09; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fbf800; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fffc00; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d603;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7b09; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7b09; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e6e300; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fffc00; color:#000000;
border:1px solid #e6e300; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fbf800; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d603; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7b09; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d603; padding: 18px 40px; color:#7c7b09;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Snapchat (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Snapchat (iOS)</span>
<span>Snapchat (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00a0df; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00a0df; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87cfeb; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0e27; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a0df; color: #0a0e27;
border: 1px solid #0a0e27; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00a0df; color: #f5f5f5;
border: 1px solid #27aee3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87cfeb; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0289c2; color: #0a0e27;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00a0df; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27aee3;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87cfeb; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87cfeb; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0a0e27; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00a0df; color:#0a0e27;
border:1px solid #0a0e27; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0289c2; color:#0a0e27;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27aee3; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87cfeb; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27aee3; padding: 18px 40px; color:#87cfeb;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">SoFi (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© SoFi (iOS)</span>
<span>SoFi (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #333333; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #333333; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9e9e9e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #323232; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #333333; color: #ffffff;
border: 1px solid #323232; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #333333; color: #f5f5f5;
border: 1px solid #525252; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9e9e9e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #333333; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#333333; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #525252;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#9e9e9e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#9e9e9e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#323232; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#333333; color:#ffffff;
border:1px solid #323232; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#333333; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #525252; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#9e9e9e; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #525252; padding: 18px 40px; color:#9e9e9e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">SoftBank</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© SoftBank</span>
<span>SoftBank · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#292929; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Sony</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Sony</span>
<span>Sony · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #693bf2; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #693bf2; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b6a1f4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #693bf2; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #693bf2; color: #f5f5f5;
border: 1px solid #7f59f2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b6a1f4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #815af4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#693bf2; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #7f59f2;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#b6a1f4; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#b6a1f4; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#693bf2; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#815af4; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #7f59f2; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#b6a1f4; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #7f59f2; padding: 18px 40px; color:#b6a1f4;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Soomgo</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Soomgo</span>
<span>Soomgo · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5500; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5500; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faad87; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5500; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5500; color: #f5f5f5;
border: 1px solid #fd6f27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faad87; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff7029; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff5500; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd6f27;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#faad87; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#faad87; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff5500; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ff7029; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd6f27; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#faad87; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd6f27; padding: 18px 40px; color:#faad87;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">SoundCloud (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© SoundCloud (iOS)</span>
<span>SoundCloud (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #304cb2; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #304cb2; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9ca9d7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e51d23; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #304cb2; color: #ffffff;
border: 1px solid #e51d23; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #304cb2; color: #f5f5f5;
border: 1px solid #5067bd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9ca9d7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4d449b; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#304cb2; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #5067bd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#9ca9d7; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#9ca9d7; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e51d23; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#304cb2; color:#ffffff;
border:1px solid #e51d23; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#4d449b; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #5067bd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#9ca9d7; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #5067bd; padding: 18px 40px; color:#9ca9d7;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Southwest (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Southwest (iOS)</span>
<span>Southwest (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f0f0fa; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f0f0fa; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #75757a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f0f0fa; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f0f0fa; color: #111111;
border: 1px solid #ccccd5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #75757a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cacad2; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f0f0fa; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #ccccd5;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#75757a; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#75757a; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f0f0fa; color:#000000;
border:1px solid #000000; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#cacad2; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #ccccd5; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#75757a; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #ccccd5; padding: 18px 40px; color:#75757a;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">SpaceX</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© SpaceX</span>
<span>SpaceX · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.7; letter-spacing: 0.32px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.7; letter-spacing: 0.32px; margin: 0; color: #f0f0fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-size: 12px; font-weight:700; background: #000000; color: #ffffff;
border: none; border-radius: 32px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13.008px; font-weight: 700; line-height: 0.94; letter-spacing: 1.17px; background: #000000; color: #ffffff;
border: 1px solid #000000; border-radius: 32px;
padding: 18px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0.32px; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f0f0fa; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #000000; color: #ffffff;
border-radius: 32px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#000000; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #000000;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.7; letter-spacing: 0.32px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.7; letter-spacing: 0.32px; display:flex; gap:28px; color:#f0f0fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 700; line-height: 1.25; letter-spacing: 0.96px; margin:0; max-width:640px; color:#000000; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.7; letter-spacing: 0.32px; margin:0; max-width:520px; color:#f0f0fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-size: 12px; font-weight:700; background:#000000; color:#ffffff;
border:none; border-radius:32px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13.008px; font-weight: 700; line-height: 0.94; letter-spacing: 1.17px; background:#000000; color:#ffffff;
border:1px solid #000000; border-radius:32px;
padding:18px 24px; white-space:nowrap; cursor:default;
}
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background:#000000; color:#ffffff;
border-radius:32px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #000000; border-radius: 32px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.7; letter-spacing: 0.32px; font-size: 16px; margin:0; color:#000000; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.7; letter-spacing: 0.32px; margin:0; color:#f0f0fa; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.7; letter-spacing: 0.32px; border-top:1px solid #000000; padding: 18px 40px; color:#f0f0fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">SpaceX</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© SpaceX</span>
<span>SpaceX · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #298737; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #298737; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #99c4a0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #237b31; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #298737; color: #000000;
border: 1px solid #237b31; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #298737; color: #f5f5f5;
border: 1px solid #4a9955; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #99c4a0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #288536; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#298737; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #4a9955;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#99c4a0; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#99c4a0; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#237b31; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#298737; color:#000000;
border:1px solid #237b31; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#288536; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #4a9955; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#99c4a0; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #4a9955; padding: 18px 40px; color:#99c4a0;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Spindle (CyberAgent Ameba)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Spindle (CyberAgent Ameba)</span>
<span>Spindle (CyberAgent Ameba) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5500; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5500; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faad87; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e64d00; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5500; color: #000000;
border: 1px solid #e64d00; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5500; color: #f5f5f5;
border: 1px solid #fd6f27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faad87; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fb5400; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff5500; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd6f27;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#faad87; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#faad87; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e64d00; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff5500; color:#000000;
border:1px solid #e64d00; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fb5400; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd6f27; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#faad87; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd6f27; padding: 18px 40px; color:#faad87;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Spoon</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Spoon</span>
<span>Spoon · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00ab6e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00ab6e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d4b8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #008c5e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00ab6e; color: #000000;
border: 1px solid #008c5e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00ab6e; color: #f5f5f5;
border: 1px solid #27b784; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d4b8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00a66b; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00ab6e; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27b784;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87d4b8; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87d4b8; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#008c5e; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00ab6e; color:#000000;
border:1px solid #008c5e; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#00a66b; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27b784; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87d4b8; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27b784; padding: 18px 40px; color:#87d4b8;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Spoqa</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Spoqa</span>
<span>Spoqa · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1ed760; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1ed760; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #176a35; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1f1f1f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1ed760; color: #1f1f1f;
border: 1px solid #1f1f1f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1ed760; color: #111111;
border: 1px solid #1cb753; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #176a35; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1eba56; color: #1f1f1f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1ed760; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #1cb753;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#176a35; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#176a35; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1f1f1f; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1ed760; color:#1f1f1f;
border:1px solid #1f1f1f; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#1eba56; color:#1f1f1f;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #1cb753; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#176a35; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #1cb753; padding: 18px 40px; color:#176a35;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Spotify</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Spotify</span>
<span>Spotify · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8f8f8f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #181818; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: 1px solid #181818; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #121212; color: #f5f5f5;
border: 1px solid #363636; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8f8f8f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #131313; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #363636;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8f8f8f; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8f8f8f; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#181818; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#121212; color:#ffffff;
border:1px solid #181818; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#131313; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #363636; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8f8f8f; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #363636; padding: 18px 40px; color:#8f8f8f;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Spotify</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Spotify</span>
<span>Spotify · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8f8f8f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1db954; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #1db954;
border: 1px solid #1db954; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #121212; color: #f5f5f5;
border: 1px solid #363636; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8f8f8f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #142d1d; color: #1db954;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #363636;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8f8f8f; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8f8f8f; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1db954; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#121212; color:#1db954;
border:1px solid #1db954; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#142d1d; color:#1db954;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #363636; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8f8f8f; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #363636; padding: 18px 40px; color:#8f8f8f;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Spotify (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Spotify (iOS)</span>
<span>Spotify (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#292929; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Squarespace</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Squarespace</span>
<span>Squarespace · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #cc5a16; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #cc5a16; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e3af91; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ee781f; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #cc5a16; color: #000000;
border: 1px solid #ee781f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #cc5a16; color: #f5f5f5;
border: 1px solid #d3733a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e3af91; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d15f17; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#cc5a16; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d3733a;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#e3af91; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#e3af91; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ee781f; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#cc5a16; color:#000000;
border:1px solid #ee781f; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d15f17; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d3733a; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#e3af91; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d3733a; padding: 18px 40px; color:#e3af91;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">SqueezeBits</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© SqueezeBits</span>
<span>SqueezeBits · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00704a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00704a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b9a8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a862; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00704a; color: #ffffff;
border: 1px solid #00a862; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00704a; color: #f5f5f5;
border: 1px solid #278565; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b9a8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00794e; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00704a; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #278565;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87b9a8; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87b9a8; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00a862; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00704a; color:#ffffff;
border:1px solid #00a862; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#00794e; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #278565; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87b9a8; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #278565; padding: 18px 40px; color:#87b9a8;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Starbucks</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Starbucks</span>
<span>Starbucks · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f2f0eb; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f2f0eb; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #767573; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #edebe9; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2f0eb; color: #000000;
border: 1px solid #edebe9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f2f0eb; color: #111111;
border: 1px solid #ceccc8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767573; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f1efeb; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f2f0eb; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #ceccc8;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#767573; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#767573; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#edebe9; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f2f0eb; color:#000000;
border:1px solid #edebe9; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#f1efeb; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #ceccc8; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#767573; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #ceccc8; padding: 18px 40px; color:#767573;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Starbucks</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Starbucks</span>
<span>Starbucks · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00704a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00704a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b9a8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1e3932; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00704a; color: #ffffff;
border: 1px solid #1e3932; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00704a; color: #f5f5f5;
border: 1px solid #278565; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b9a8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #056746; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00704a; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #278565;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87b9a8; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87b9a8; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1e3932; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00704a; color:#ffffff;
border:1px solid #1e3932; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#056746; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #278565; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87b9a8; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #278565; padding: 18px 40px; color:#87b9a8;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Starbucks (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Starbucks (iOS)</span>
<span>Starbucks (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #50ffeb; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #50ffeb; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #2d7c73; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #321e37; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #50ffeb; color: #321e37;
border: 1px solid #321e37; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #50ffeb; color: #111111;
border: 1px solid #46d9c8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #2d7c73; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4bdbce; color: #321e37;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#50ffeb; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #46d9c8;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#2d7c73; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#2d7c73; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#321e37; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#50ffeb; color:#321e37;
border:1px solid #321e37; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#4bdbce; color:#321e37;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #46d9c8; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#2d7c73; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #46d9c8; padding: 18px 40px; color:#2d7c73;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Starling Bank</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Starling Bank</span>
<span>Starling Bank · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a1a1a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a1a1a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #929292; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #181818; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ffffff;
border: 1px solid #181818; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a1a1a; color: #f5f5f5;
border: 1px solid #3d3d3d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #929292; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1a1a1a; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1a1a1a; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3d3d3d;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#929292; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#929292; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#181818; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1a1a1a; color:#ffffff;
border:1px solid #181818; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#1a1a1a; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3d3d3d; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#929292; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3d3d3d; padding: 18px 40px; color:#929292;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Stayfolio</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Stayfolio</span>
<span>Stayfolio · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff6464; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff6464; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c3636; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #202124; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6464; color: #202124;
border: 1px solid #202124; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff6464; color: #111111;
border: 1px solid #d95757; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c3636; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #db595a; color: #202124;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff6464; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d95757;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c3636; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c3636; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#202124; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff6464; color:#202124;
border:1px solid #202124; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#db595a; color:#202124;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d95757; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c3636; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d95757; padding: 18px 40px; color:#7c3636;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Stibee</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Stibee</span>
<span>Stibee · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fc4c02; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fc4c02; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f8a988; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fc4c02; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fc4c02; color: #f5f5f5;
border: 1px solid #fb6729; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f8a988; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fc692a; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fc4c02; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fb6729;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f8a988; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f8a988; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fc4c02; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fc692a; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fb6729; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f8a988; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fb6729; padding: 18px 40px; color:#f8a988;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Strava (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Strava (iOS)</span>
<span>Strava (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0d253d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0d253d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 300; line-height: 1.1; letter-spacing: -0.22px; margin: 0; color: #0d253d; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.4; letter-spacing: -0.42px; margin: 0; color: #64748d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.0; background: #533afd; color: #ffffff;
border: none; border-radius: 9999px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.0; background: #ffffff; color: #533afd;
border: 1px solid #533afd; border-radius: 9999px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.4; background: #ffffff; color: #0d253d;
border: 1px solid #c2c8ce; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #64748d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 400; line-height: 1.15; letter-spacing: 0.1px; background: #b9b9f9; color: #4434d4;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0d253d; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dde0e4;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 300; line-height: 1.1; letter-spacing: -0.22px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.4; letter-spacing: -0.42px; display:flex; gap:28px; color:#64748d; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 300; line-height: 1.15; letter-spacing: -0.96px; margin:0; max-width:640px; color:#0d253d; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.4; letter-spacing: -0.42px; margin:0; max-width:520px; color:#64748d; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.0; background:#533afd; color:#ffffff;
border:none; border-radius:9999px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.0; background:#ffffff; color:#533afd;
border:1px solid #533afd; border-radius:9999px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 400; line-height: 1.15; letter-spacing: 0.1px; background:#b9b9f9; color:#4434d4;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dde0e4; border-radius: 12px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 300; line-height: 1.1; letter-spacing: -0.22px; font-size: 16px; margin:0; color:#0d253d; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.4; letter-spacing: -0.42px; margin:0; color:#64748d; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.4; letter-spacing: -0.42px; border-top:1px solid #dde0e4; padding: 18px 40px; color:#64748d;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Stripe</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Stripe</span>
<span>Stripe · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #635bff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #635bff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b3b0fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #414552; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #635bff; color: #ffffff;
border: 1px solid #414552; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #635bff; color: #f5f5f5;
border: 1px solid #7a74fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b3b0fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5e57e3; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#635bff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #7a74fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#b3b0fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#b3b0fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#414552; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#635bff; color:#ffffff;
border:1px solid #414552; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#5e57e3; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #7a74fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#b3b0fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #7a74fd; padding: 18px 40px; color:#b3b0fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Stripe</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Stripe</span>
<span>Stripe · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a1a1a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a1a1a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #929292; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #242424; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ffffff;
border: 1px solid #242424; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a1a1a; color: #f5f5f5;
border: 1px solid #3d3d3d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #929292; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1c1c1c; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1a1a1a; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3d3d3d;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#929292; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#929292; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#242424; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1a1a1a; color:#ffffff;
border:1px solid #242424; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#1c1c1c; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3d3d3d; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#929292; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3d3d3d; padding: 18px 40px; color:#929292;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Strong (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Strong (iOS)</span>
<span>Strong (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #007cff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #007cff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bffa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4b9cfb; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #007cff; color: #000000;
border: 1px solid #4b9cfb; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #007cff; color: #f5f5f5;
border: 1px solid #278ffd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bffa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0c81fe; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#007cff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #278ffd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87bffa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87bffa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#4b9cfb; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#007cff; color:#000000;
border:1px solid #4b9cfb; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0c81fe; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #278ffd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87bffa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #278ffd; padding: 18px 40px; color:#87bffa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Studio</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Studio</span>
<span>Studio · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff6719; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff6719; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fab592; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4a6fe3; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6719; color: #000000;
border: 1px solid #4a6fe3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff6719; color: #f5f5f5;
border: 1px solid #fd7e3c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fab592; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e26839; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff6719; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd7e3c;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#fab592; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#fab592; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#4a6fe3; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff6719; color:#000000;
border:1px solid #4a6fe3; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#e26839; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd7e3c; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#fab592; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd7e3c; padding: 18px 40px; color:#fab592;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Substack (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Substack (iOS)</span>
<span>Substack (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3ecf8e; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3ecf8e; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #256649; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #24b47e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3ecf8e; color: #000000;
border: 1px solid #24b47e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3ecf8e; color: #111111;
border: 1px solid #37b17a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #256649; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3acb8b; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#3ecf8e; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #37b17a;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#256649; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#256649; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#24b47e; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3ecf8e; color:#000000;
border:1px solid #24b47e; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#3acb8b; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #37b17a; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#256649; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #37b17a; padding: 18px 40px; color:#256649;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Supabase</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Supabase</span>
<span>Supabase · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #72e3ad; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #72e3ad; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #3d7057; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #72e3ad; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #72e3ad; color: #111111;
border: 1px solid #62c194; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #3d7057; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #6ecfb8; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#72e3ad; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #62c194;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#3d7057; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#3d7057; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#72e3ad; color:#5865f2;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#6ecfb8; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #62c194; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#3d7057; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #62c194; padding: 18px 40px; color:#3d7057;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Supabase</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Supabase</span>
<span>Supabase · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #292827;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #292827;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 460; line-height: 1.1; letter-spacing: -0.315px; margin: 0; color: #292827; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 460; line-height: 1.5; margin: 0; color: #73706d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-size: 12px; font-weight:700; background: #1b1938; color: #ffffff;
border: none; border-radius: 999px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.0; background: #ffffff; color: #292827;
border: 1px solid #1b1938; border-radius: 8px;
padding: 12px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 460; line-height: 1.5; background: #ffffff; color: #292827;
border: 1px solid #cac9c9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #73706d; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dfdfe3; color: #1b1938;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#292827; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #e1e1e1;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 460; line-height: 1.1; letter-spacing: -0.315px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 460; line-height: 1.5; display:flex; gap:28px; color:#73706d; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 460; line-height: 0.96; letter-spacing: -1.32px; margin:0; max-width:640px; color:#292827; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 460; line-height: 1.5; margin:0; max-width:520px; color:#73706d; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-size: 12px; font-weight:700; background:#1b1938; color:#ffffff;
border:none; border-radius:999px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.0; background:#ffffff; color:#292827;
border:1px solid #1b1938; border-radius:8px;
padding:12px 20px; white-space:nowrap; cursor:default;
}
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background:#dfdfe3; color:#1b1938;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #e1e1e1; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 460; line-height: 1.1; letter-spacing: -0.315px; font-size: 16px; margin:0; color:#292827; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 460; line-height: 1.5; margin:0; color:#73706d; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 460; line-height: 1.5; border-top:1px solid #e1e1e1; padding: 18px 40px; color:#73706d;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Superhuman</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Superhuman</span>
<span>Superhuman · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5840ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5840ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #aea4fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1b1938; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5840ff; color: #1b1938;
border: 1px solid #1b1938; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5840ff; color: #f5f5f5;
border: 1px solid #715dfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aea4fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4e3adf; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#5840ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #715dfd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#aea4fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#aea4fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1b1938; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5840ff; color:#1b1938;
border:1px solid #1b1938; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#4e3adf; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #715dfd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#aea4fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #715dfd; padding: 18px 40px; color:#aea4fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Superhuman</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Superhuman</span>
<span>Superhuman · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #227cff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #227cff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #96bffa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #94fb4d; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #227cff; color: #94fb4d;
border: 1px solid #94fb4d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #227cff; color: #f5f5f5;
border: 1px solid #448ffd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #96bffa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3490e3; color: #94fb4d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#227cff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #448ffd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#96bffa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#96bffa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#94fb4d; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#227cff; color:#94fb4d;
border:1px solid #94fb4d; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#3490e3; color:#94fb4d;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #448ffd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#96bffa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #448ffd; padding: 18px 40px; color:#96bffa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Supertone</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Supertone</span>
<span>Supertone · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3dba90; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3dba90; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #255d4a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3e3e3e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3dba90; color: #3e3e3e;
border: 1px solid #3e3e3e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3dba90; color: #111111;
border: 1px solid #369f7c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #255d4a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3da683; color: #3e3e3e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#3dba90; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #369f7c;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#255d4a; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#255d4a; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3e3e3e; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3dba90; color:#3e3e3e;
border:1px solid #3e3e3e; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#3da683; color:#3e3e3e;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #369f7c; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#255d4a; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #369f7c; padding: 18px 40px; color:#255d4a;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">SurveyCake</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© SurveyCake</span>
<span>SurveyCake · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #121212;
border: 1px solid #121212; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d9d9d9; color: #121212;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#121212; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#121212;
border:1px solid #121212; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d9d9d9; color:#121212;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Swiggy (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Swiggy (iOS)</span>
<span>Swiggy (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1ec59f; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1ec59f; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #176251; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #17a384; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1ec59f; color: #000000;
border: 1px solid #17a384; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1ec59f; color: #111111;
border: 1px solid #1ca888; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #176251; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1dc09b; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1ec59f; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #1ca888;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#176251; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#176251; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#17a384; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1ec59f; color:#000000;
border:1px solid #17a384; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#1dc09b; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #1ca888; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#176251; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #1ca888; padding: 18px 40px; color:#176251;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">TADA</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© TADA</span>
<span>TADA · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0a0a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #0a0a0a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #020202; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0a0a0a; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #0a0a0a; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#020202; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">TIDAL (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© TIDAL (iOS)</span>
<span>TIDAL (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0064ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0064ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b4fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0061fd; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0064ff; color: #ffffff;
border: 1px solid #0061fd; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0064ff; color: #f5f5f5;
border: 1px solid #277bfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b4fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0064ff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0064ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #277bfd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87b4fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87b4fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0061fd; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0064ff; color:#ffffff;
border:1px solid #0061fd; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0064ff; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #277bfd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87b4fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #277bfd; padding: 18px 40px; color:#87b4fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">TMAP Mobility</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© TMAP Mobility</span>
<span>TMAP Mobility · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff153c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff153c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fa90a2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff153c; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff153c; color: #f5f5f5;
border: 1px solid #fd395a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fa90a2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d61232; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff153c; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd395a;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#fa90a2; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#fa90a2; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff153c; color:#000000;
border:1px solid #000000; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d61232; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd395a; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#fa90a2; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd395a; padding: 18px 40px; color:#fa90a2;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">TVING</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© TVING</span>
<span>TVING · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5100; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5100; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faab87; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1cfbce; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5100; color: #000000;
border: 1px solid #1cfbce; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5100; color: #f5f5f5;
border: 1px solid #fd6b27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faab87; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #db6c21; color: #1cfbce;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff5100; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd6b27;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#faab87; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#faab87; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1cfbce; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff5100; color:#000000;
border:1px solid #1cfbce; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#db6c21; color:#1cfbce;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd6b27; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#faab87; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd6b27; padding: 18px 40px; color:#faab87;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Tabling</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Tabling</span>
<span>Tabling · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0e0a14; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0e0a14; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d8b90; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #702082; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e0a14; color: #ffffff;
border: 1px solid #702082; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0e0a14; color: #f5f5f5;
border: 1px solid #333038; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8b90; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1e0e26; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0e0a14; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #333038;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8d8b90; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8d8b90; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#702082; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0e0a14; color:#ffffff;
border:1px solid #702082; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#1e0e26; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #333038; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8d8b90; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #333038; padding: 18px 40px; color:#8d8b90;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Taco Bell (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Taco Bell (iOS)</span>
<span>Taco Bell (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0056b3; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0056b3; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87add7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f9f9f9; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0056b3; color: #f9f9f9;
border: 1px solid #f9f9f9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0056b3; color: #f5f5f5;
border: 1px solid #276fbe; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87add7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2870be; color: #f9f9f9;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0056b3; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #276fbe;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87add7; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87add7; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f9f9f9; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0056b3; color:#f9f9f9;
border:1px solid #f9f9f9; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2870be; color:#f9f9f9;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #276fbe; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87add7; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #276fbe; padding: 18px 40px; color:#87add7;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Taishin Bank</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Taishin Bank</span>
<span>Taishin Bank · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ca4f0f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ca4f0f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e2aa8e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ca4f0f; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ca4f0f; color: #f5f5f5;
border: 1px solid #d16a34; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e2aa8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #b85333; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ca4f0f; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d16a34;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#e2aa8e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#e2aa8e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ca4f0f; color:#000000;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#b85333; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d16a34; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#e2aa8e; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d16a34; padding: 18px 40px; color:#e2aa8e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Taiwan High Speed Rail</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Taiwan High Speed Rail</span>
<span>Taiwan High Speed Rail · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff6700; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff6700; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fab587; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #024d58; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6700; color: #024d58;
border: 1px solid #024d58; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff6700; color: #f5f5f5;
border: 1px solid #fd7e27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fab587; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d7630e; color: #024d58;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff6700; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd7e27;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#fab587; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#fab587; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#024d58; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff6700; color:#024d58;
border:1px solid #024d58; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d7630e; color:#024d58;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd7e27; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#fab587; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd7e27; padding: 18px 40px; color:#fab587;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Taiwan Mobile</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Taiwan Mobile</span>
<span>Taiwan Mobile · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fa0030; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fa0030; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f7879c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0c0e13; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fa0030; color: #0c0e13;
border: 1px solid #0c0e13; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fa0030; color: #f5f5f5;
border: 1px solid #f92750; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f7879c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d4022b; color: #0c0e13;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fa0030; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #f92750;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f7879c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f7879c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0c0e13; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fa0030; color:#0c0e13;
border:1px solid #0c0e13; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d4022b; color:#0c0e13;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #f92750; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f7879c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #f92750; padding: 18px 40px; color:#f7879c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Team Sparta</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Team Sparta</span>
<span>Team Sparta · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0088cc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0088cc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87c4e3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #40a7e3; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0088cc; color: #000000;
border: 1px solid #40a7e3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0088cc; color: #f5f5f5;
border: 1px solid #2799d3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87c4e3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0a8dd0; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0088cc; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2799d3;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87c4e3; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87c4e3; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#40a7e3; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0088cc; color:#000000;
border:1px solid #40a7e3; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0a8dd0; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2799d3; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87c4e3; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2799d3; padding: 18px 40px; color:#87c4e3;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Telegram (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Telegram (iOS)</span>
<span>Telegram (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #07beb8; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #07beb8; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8adcda; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2fdf6; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #07beb8; color: #000000;
border: 1px solid #f2fdf6; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #07beb8; color: #000000;
border: 1px solid #2dc7c2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8adcda; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2dc8c2; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#07beb8; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2dc7c2;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8adcda; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8adcda; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f2fdf6; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#07beb8; color:#000000;
border:1px solid #f2fdf6; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2dc8c2; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2dc7c2; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8adcda; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2dc7c2; padding: 18px 40px; color:#8adcda;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">TellingMe</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© TellingMe</span>
<span>TellingMe · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3e6ae1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3e6ae1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a3b6ec; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3e6ae1; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3e6ae1; color: #f5f5f5;
border: 1px solid #5b80e4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a3b6ec; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5d82e6; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#3e6ae1; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #5b80e4;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#a3b6ec; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#a3b6ec; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3e6ae1; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#5d82e6; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #5b80e4; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#a3b6ec; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #5b80e4; padding: 18px 40px; color:#a3b6ec;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Tesla</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Tesla</span>
<span>Tesla · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3e6ae1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3e6ae1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a3b6ec; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3e6ae1; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3e6ae1; color: #f5f5f5;
border: 1px solid #5b80e4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a3b6ec; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5d82e6; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#3e6ae1; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #5b80e4;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#a3b6ec; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#a3b6ec; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3e6ae1; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#5d82e6; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #5b80e4; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#a3b6ec; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #5b80e4; padding: 18px 40px; color:#a3b6ec;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Tesla</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Tesla</span>
<span>Tesla · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a0a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a0a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8b8b8b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c8a35a; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0a0a; color: #c8a35a;
border: 1px solid #c8a35a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a0a0a; color: #f5f5f5;
border: 1px solid #303030; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8b8b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #282217; color: #c8a35a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0a0a0a; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #303030;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8b8b8b; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8b8b8b; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#c8a35a; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0a0a0a; color:#c8a35a;
border:1px solid #c8a35a; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#282217; color:#c8a35a;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #303030; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8b8b8b; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #303030; padding: 18px 40px; color:#8b8b8b;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">The League (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© The League (iOS)</span>
<span>The League (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff66af; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff66af; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c3758; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff66af; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff66af; color: #111111;
border: 1px solid #d95896; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c3758; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff7ebc; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff66af; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d95896;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c3758; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c3758; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff66af; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ff7ebc; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d95896; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c3758; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d95896; padding: 18px 40px; color:#7c3758;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">The Pinkfong Company</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© The Pinkfong Company</span>
<span>The Pinkfong Company · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5200ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5200ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ac87fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3cffd0; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5200ff; color: #3cffd0;
border: 1px solid #3cffd0; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5200ff; color: #f5f5f5;
border: 1px solid #6c27fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ac87fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4e29f7; color: #3cffd0;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#5200ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #6c27fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#ac87fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#ac87fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3cffd0; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5200ff; color:#3cffd0;
border:1px solid #3cffd0; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#4e29f7; color:#3cffd0;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #6c27fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#ac87fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #6c27fd; padding: 18px 40px; color:#ac87fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">The Verge</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© The Verge</span>
<span>The Verge · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #131313; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #131313; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8f8f8f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3cffd0; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #131313; color: #3cffd0;
border: 1px solid #3cffd0; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #131313; color: #f5f5f5;
border: 1px solid #373737; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8f8f8f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1a3931; color: #3cffd0;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#131313; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #373737;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8f8f8f; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8f8f8f; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3cffd0; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#131313; color:#3cffd0;
border:1px solid #3cffd0; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#1a3931; color:#3cffd0;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #373737; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8f8f8f; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #373737; padding: 18px 40px; color:#8f8f8f;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">The Verge</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© The Verge</span>
<span>The Verge · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f5f6f8; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f5f6f8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfefe; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f5f6f8; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#000000;
border:1px solid #f5f6f8; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fdfefe; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Things 3 (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Things 3 (iOS)</span>
<span>Things 3 (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#292929; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Threads (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Threads (iOS)</span>
<span>Threads (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #088a29; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #088a29;
border: 1px solid #088a29; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d7ecdd; color: #088a29;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#088a29; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#088a29;
border:1px solid #088a29; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d7ecdd; color:#088a29;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Threema (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Threema (iOS)</span>
<span>Threema (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #009fd9; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #009fd9; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87cee8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #009fd9; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #009fd9; color: #f5f5f5;
border: 1px solid #27addd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87cee8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e96dd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#009fd9; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27addd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87cee8; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87cee8; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#009fd9; color:#000000;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0e96dd; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27addd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87cee8; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27addd; padding: 18px 40px; color:#87cee8;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Thumbtack Thumbprint</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Thumbtack Thumbprint</span>
<span>Thumbtack Thumbprint · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #25f4ee; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #25f4ee; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #1a7774; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fe2c55; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #25f4ee; color: #fe2c55;
border: 1px solid #fe2c55; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #25f4ee; color: #111111;
border: 1px solid #22d0cb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #1a7774; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #48d4d6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#25f4ee; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #22d0cb;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#1a7774; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#1a7774; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fe2c55; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#25f4ee; color:#fe2c55;
border:1px solid #fe2c55; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#48d4d6; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #22d0cb; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#1a7774; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #22d0cb; padding: 18px 40px; color:#1a7774;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">TikTok (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© TikTok (iOS)</span>
<span>TikTok (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffd700; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffd700; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6a09; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #007aff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffd700; color: #007aff;
border: 1px solid #007aff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffd700; color: #111111;
border: 1px solid #d9b703; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6a09; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6c829; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffd700; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9b703;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c6a09; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c6a09; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#007aff; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffd700; color:#007aff;
border:1px solid #007aff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d6c829; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9b703; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c6a09; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9b703; padding: 18px 40px; color:#7c6a09;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Timee</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Timee</span>
<span>Timee · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fd267a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fd267a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f998be; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6036; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fd267a; color: #000000;
border: 1px solid #ff6036; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fd267a; color: #f5f5f5;
border: 1px solid #fc478e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f998be; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fd2f6f; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fd267a; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fc478e;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f998be; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f998be; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff6036; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fd267a; color:#000000;
border:1px solid #ff6036; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fd2f6f; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fc478e; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f998be; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fc478e; padding: 18px 40px; color:#f998be;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Tinder (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Tinder (iOS)</span>
<span>Tinder (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #dc4c3e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #dc4c3e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #eaa9a3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fafafa; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #dc4c3e; color: #fafafa;
border: 1px solid #fafafa; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #dc4c3e; color: #f5f5f5;
border: 1px solid #e0675b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #eaa9a3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e1685c; color: #fafafa;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#dc4c3e; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #e0675b;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#eaa9a3; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#eaa9a3; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fafafa; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#dc4c3e; color:#fafafa;
border:1px solid #fafafa; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#e1685c; color:#fafafa;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #e0675b; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#eaa9a3; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #e0675b; padding: 18px 40px; color:#eaa9a3;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Todoist (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Todoist (iOS)</span>
<span>Todoist (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 25.3px; letter-spacing: -0.22px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 500; line-height: 11px; letter-spacing: 0.55px; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 500; line-height: 16px; letter-spacing: 0.08px; background: #000000; color: #ffffff;
border: none; border-radius: 4px; padding: {spacing.xs} {spacing.2xl};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 500; line-height: 16px; letter-spacing: 0.08px; background: #c8f6f9; color: #000000;
border: 1px solid #000000; border-radius: 4px;
padding: {spacing.xs} {spacing.2xl}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20.8px; letter-spacing: -0.16px; background: #ffffff; color: #000000;
border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 20.8px; letter-spacing: -0.16px; background: #ffffff; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dbdbdb;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 25.3px; letter-spacing: -0.22px; font-size: 18px; margin:0; }
.navlinks { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 500; line-height: 11px; letter-spacing: 0.55px; display:flex; gap:28px; color:#666666; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 40px; font-weight: 500; line-height: 48px; letter-spacing: -0.8px; margin:0; max-width:640px; color:#000000; }
.hero p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 500; line-height: 11px; letter-spacing: 0.55px; margin:0; max-width:520px; color:#666666; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 500; line-height: 16px; letter-spacing: 0.08px; background:#000000; color:#ffffff;
border:none; border-radius:4px; padding:{spacing.xs} {spacing.2xl};
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 500; line-height: 16px; letter-spacing: 0.08px; background:#c8f6f9; color:#000000;
border:1px solid #000000; border-radius:4px;
padding:{spacing.xs} {spacing.2xl}; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 20.8px; letter-spacing: -0.16px; background:#ffffff; color:#000000;
border-radius:4px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dbdbdb; border-radius: 4px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 25.3px; letter-spacing: -0.22px; font-size: 16px; margin:0; color:#000000; }
.feature-card p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 500; line-height: 11px; letter-spacing: 0.55px; margin:0; color:#666666; }
footer {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 500; line-height: 11px; letter-spacing: 0.55px; border-top:1px solid #dbdbdb; padding: 18px 40px; color:#666666;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Together AI</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Together AI</span>
<span>Together AI · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#292929; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Together AI</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Together AI</span>
<span>Together AI · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0064ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0064ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b4fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0064ff; color: #ffffff;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0064ff; color: #f5f5f5;
border: 1px solid #277bfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b4fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e64fd; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0064ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #277bfd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87b4fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87b4fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0064ff; color:#ffffff;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0e64fd; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #277bfd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87b4fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #277bfd; padding: 18px 40px; color:#87b4fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Toss</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Toss</span>
<span>Toss · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0064ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0064ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b4fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #202632; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0064ff; color: #202632;
border: 1px solid #202632; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0064ff; color: #f5f5f5;
border: 1px solid #277bfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b4fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #055ade; color: #202632;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0064ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #277bfd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87b4fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87b4fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#202632; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0064ff; color:#202632;
border:1px solid #202632; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#055ade; color:#202632;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #277bfd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87b4fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #277bfd; padding: 18px 40px; color:#87b4fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Toss Bank</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Toss Bank</span>
<span>Toss Bank · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3182f6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3182f6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9dc1f5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3182f6; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3182f6; color: #f5f5f5;
border: 1px solid #5094f6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9dc1f5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5296f7; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#3182f6; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #5094f6;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#9dc1f5; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#9dc1f5; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3182f6; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#5296f7; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #5094f6; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#9dc1f5; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #5094f6; padding: 18px 40px; color:#9dc1f5;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Toss Securities</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Toss Securities</span>
<span>Toss Securities · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #034f6d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #034f6d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #88aab8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #212121; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #034f6d; color: #ffffff;
border: 1px solid #212121; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #034f6d; color: #f5f5f5;
border: 1px solid #2a6a83; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #88aab8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #084861; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#034f6d; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2a6a83;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#88aab8; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#88aab8; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#212121; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#034f6d; color:#ffffff;
border:1px solid #212121; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#084861; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2a6a83; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#88aab8; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2a6a83; padding: 18px 40px; color:#88aab8;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Toyota</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Toyota</span>
<span>Toyota · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00a88f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00a88f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d2c7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2332c4; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a88f; color: #2332c4;
border: 1px solid #2332c4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00a88f; color: #f5f5f5;
border: 1px solid #27b49f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d2c7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #069597; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00a88f; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27b49f;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87d2c7; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87d2c7; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2332c4; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00a88f; color:#2332c4;
border:1px solid #2332c4; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#069597; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27b49f; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87d2c7; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27b49f; padding: 18px 40px; color:#87d2c7;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Trainline</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Trainline</span>
<span>Trainline · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0079bf; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0079bf; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bddd; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f1f2f4; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0079bf; color: #f1f2f4;
border: 1px solid #f1f2f4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0079bf; color: #f5f5f5;
border: 1px solid #278dc8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bddd; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #278cc7; color: #f1f2f4;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0079bf; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #278dc8;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87bddd; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87bddd; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f1f2f4; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0079bf; color:#f1f2f4;
border:1px solid #f1f2f4; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#278cc7; color:#f1f2f4;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #278dc8; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87bddd; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #278dc8; padding: 18px 40px; color:#87bddd;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Trello (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Trello (iOS)</span>
<span>Trello (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7620f6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7620f6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #bc95f5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7351ec; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7620f6; color: #ffffff;
border: 1px solid #7351ec; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7620f6; color: #f5f5f5;
border: 1px solid #8a42f6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bc95f5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #7628f4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#7620f6; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #8a42f6;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#bc95f5; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#bc95f5; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#7351ec; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#7620f6; color:#ffffff;
border:1px solid #7351ec; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#7628f4; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #8a42f6; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#bc95f5; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #8a42f6; padding: 18px 40px; color:#bc95f5;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Trenbe</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Trenbe</span>
<span>Trenbe · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #34e0a1; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #34e0a1; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dffaf0; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#34e0a1; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#000000;
border:1px solid #34e0a1; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#dffaf0; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Tripadvisor (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Tripadvisor (iOS)</span>
<span>Tripadvisor (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #368fff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #368fff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9fc7fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a85e8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #368fff; color: #000000;
border: 1px solid #1a85e8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #368fff; color: #f5f5f5;
border: 1px solid #559ffd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9fc7fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #328dfb; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#368fff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #559ffd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#9fc7fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#9fc7fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1a85e8; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#368fff; color:#000000;
border:1px solid #1a85e8; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#328dfb; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #559ffd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#9fc7fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #559ffd; padding: 18px 40px; color:#9fc7fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Triple</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Triple</span>
<span>Triple · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a2a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a2a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8b8b9a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7408ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0a2a; color: #7408ff;
border: 1px solid #7408ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a0a2a; color: #f5f5f5;
border: 1px solid #30304a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8b9a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1b0a4c; color: #7408ff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0a0a2a; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #30304a;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8b8b9a; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8b8b9a; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#7408ff; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0a0a2a; color:#7408ff;
border:1px solid #7408ff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#1b0a4c; color:#7408ff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #30304a; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8b8b9a; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #30304a; padding: 18px 40px; color:#8b8b9a;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Tubi (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Tubi (iOS)</span>
<span>Tubi (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fd5744; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fd5744; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f9aea5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f86453; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fd5744; color: #000000;
border: 1px solid #f86453; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fd5744; color: #f5f5f5;
border: 1px solid #fc7060; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f9aea5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fc5946; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fd5744; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fc7060;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f9aea5; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f9aea5; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f86453; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fd5744; color:#000000;
border:1px solid #f86453; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fc5946; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fc7060; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f9aea5; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fc7060; padding: 18px 40px; color:#f9aea5;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Tumblbug</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Tumblbug</span>
<span>Tumblbug · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #001935; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #001935; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87929f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #001020; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #001935; color: #ffffff;
border: 1px solid #001020; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #001935; color: #f5f5f5;
border: 1px solid #273c54; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87929f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #001832; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#001935; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #273c54;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87929f; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87929f; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#001020; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#001935; color:#ffffff;
border:1px solid #001020; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#001832; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #273c54; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87929f; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #273c54; padding: 18px 40px; color:#87929f;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Tumblr (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Tumblr (iOS)</span>
<span>Tumblr (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #593bfb; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #593bfb; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #afa1f8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5ce0b8; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #593bfb; color: #5ce0b8;
border: 1px solid #5ce0b8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #593bfb; color: #f5f5f5;
border: 1px solid #7259fa; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #afa1f8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5955f0; color: #5ce0b8;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#593bfb; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #7259fa;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#afa1f8; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#afa1f8; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5ce0b8; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#593bfb; color:#5ce0b8;
border:1px solid #5ce0b8; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#5955f0; color:#5ce0b8;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #7259fa; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#afa1f8; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #7259fa; padding: 18px 40px; color:#afa1f8;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Turo (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Turo (iOS)</span>
<span>Turo (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ef223a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ef223a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f296a1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000d25; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ef223a; color: #000d25;
border: 1px solid #000d25; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ef223a; color: #f5f5f5;
border: 1px solid #f04458; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f296a1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #c91f37; color: #000d25;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ef223a; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #f04458;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f296a1; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f296a1; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000d25; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ef223a; color:#000d25;
border:1px solid #000d25; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#c91f37; color:#000d25;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #f04458; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f296a1; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #f04458; padding: 18px 40px; color:#f296a1;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Twilio</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Twilio</span>
<span>Twilio · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #9146ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #9146ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #c8a6fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5c16c5; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #9146ff; color: #ffffff;
border: 1px solid #5c16c5; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #9146ff; color: #f5f5f5;
border: 1px solid #a162fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c8a6fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #893ef6; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#9146ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #a162fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#c8a6fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#c8a6fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5c16c5; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#9146ff; color:#ffffff;
border:1px solid #5c16c5; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#893ef6; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #a162fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#c8a6fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #a162fd; padding: 18px 40px; color:#c8a6fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Twitch</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Twitch</span>
<span>Twitch · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0e0e10; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0e0e10; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d8d8e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #18181b; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e0e10; color: #ffffff;
border: 1px solid #18181b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0e0e10; color: #f5f5f5;
border: 1px solid #333335; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8d8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #101012; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0e0e10; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #333335;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8d8d8e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8d8d8e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#18181b; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0e0e10; color:#ffffff;
border:1px solid #18181b; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#101012; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #333335; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8d8d8e; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #333335; padding: 18px 40px; color:#8d8d8e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Twitch (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Twitch (iOS)</span>
<span>Twitch (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #a88ef5; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #a88ef5; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #554978; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c9b5f4; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #a88ef5; color: #000000;
border: 1px solid #c9b5f4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #a88ef5; color: #111111;
border: 1px solid #907ad1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #554978; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ad94f5; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#a88ef5; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #907ad1;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#554978; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#554978; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#c9b5f4; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#a88ef5; color:#000000;
border:1px solid #c9b5f4; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ad94f5; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #907ad1; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#554978; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #907ad1; padding: 18px 40px; color:#554978;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Typed (Business Canvas)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Typed (Business Canvas)</span>
<span>Typed (Business Canvas) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #005ea2; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #005ea2; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b1d0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #005ea2; color: #ffffff;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #005ea2; color: #f5f5f5;
border: 1px solid #2776af; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b1d0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e5faf; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#005ea2; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2776af;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87b1d0; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87b1d0; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#005ea2; color:#ffffff;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0e5faf; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2776af; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87b1d0; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2776af; padding: 18px 40px; color:#87b1d0;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">U.S. Web Design System</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© U.S. Web Design System</span>
<span>U.S. Web Design System · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2f76aa; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2f76aa; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9cbcd3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fafafa; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2f76aa; color: #fafafa;
border: 1px solid #fafafa; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2f76aa; color: #f5f5f5;
border: 1px solid #4f8ab6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9cbcd3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4f8bb7; color: #fafafa;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#2f76aa; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #4f8ab6;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#9cbcd3; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#9cbcd3; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fafafa; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2f76aa; color:#fafafa;
border:1px solid #fafafa; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#4f8bb7; color:#fafafa;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #4f8ab6; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#9cbcd3; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #4f8ab6; padding: 18px 40px; color:#9cbcd3;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">UDN</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© UDN</span>
<span>UDN · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#292929; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Uber</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Uber</span>
<span>Uber · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 32px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; margin: 0; color: #afafaf; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 20px; background: #000000; color: #ffffff;
border: none; border-radius: 999px; padding: {spacing.md} {spacing.md};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 20px; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 999px;
padding: {spacing.md} {spacing.md}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; background: #efefef; color: #000000;
border: 1px solid #bfbfbf; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #afafaf; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dbdbdb; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dbdbdb;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 32px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; display:flex; gap:28px; color:#afafaf; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 36px; font-weight: 700; line-height: 44px; margin:0; max-width:640px; color:#000000; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; margin:0; max-width:520px; color:#afafaf; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 20px; background:#000000; color:#ffffff;
border:none; border-radius:999px; padding:{spacing.md} {spacing.md};
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 20px; background:#ffffff; color:#000000;
border:1px solid #000000; border-radius:999px;
padding:{spacing.md} {spacing.md}; white-space:nowrap; cursor:default;
}
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background:#dbdbdb; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dbdbdb; border-radius: 12px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 32px; font-size: 16px; margin:0; color:#000000; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; margin:0; color:#afafaf; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; border-top:1px solid #dbdbdb; padding: 18px 40px; color:#afafaf;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Uber</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Uber</span>
<span>Uber · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#292929; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Uber (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Uber (iOS)</span>
<span>Uber (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #06c167; color: #000000;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #06c167; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d7f5e7; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#06c167; color:#000000;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#000000;
border:1px solid #06c167; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d7f5e7; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Uber Eats (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Uber Eats (iOS)</span>
<span>Uber Eats (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3959cc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3959cc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a0afe3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #304cad; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3959cc; color: #ffffff;
border: 1px solid #304cad; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3959cc; color: #f5f5f5;
border: 1px solid #5772d3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a0afe3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3857c7; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#3959cc; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #5772d3;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#a0afe3; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#a0afe3; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#304cad; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3959cc; color:#ffffff;
border:1px solid #304cad; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#3857c7; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #5772d3; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#a0afe3; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #5772d3; padding: 18px 40px; color:#a0afe3;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Ubie</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Ubie</span>
<span>Ubie · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ed1d24; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ed1d24; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f19497; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c8161c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ed1d24; color: #000000;
border: 1px solid #c8161c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ed1d24; color: #f5f5f5;
border: 1px solid #ee4045; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f19497; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e71c23; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ed1d24; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #ee4045;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f19497; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f19497; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#c8161c; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ed1d24; color:#000000;
border:1px solid #c8161c; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#e71c23; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #ee4045; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f19497; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #ee4045; padding: 18px 40px; color:#f19497;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Uniqlo</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Uniqlo</span>
<span>Uniqlo · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #002244; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #002244; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8796a5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1414ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #002244; color: #ffffff;
border: 1px solid #1414ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #002244; color: #f5f5f5;
border: 1px solid #274460; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8796a5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #032062; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#002244; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #274460;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8796a5; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8796a5; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1414ff; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#002244; color:#ffffff;
border:1px solid #1414ff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#032062; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #274460; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8796a5; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #274460; padding: 18px 40px; color:#8796a5;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">United (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© United (iOS)</span>
<span>United (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0062df; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0062df; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b3eb; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #003597; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0062df; color: #ffffff;
border: 1px solid #003597; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0062df; color: #f5f5f5;
border: 1px solid #277ae3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b3eb; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #005bd3; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0062df; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #277ae3;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87b3eb; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87b3eb; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#003597; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0062df; color:#ffffff;
border:1px solid #003597; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#005bd3; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #277ae3; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87b3eb; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #277ae3; padding: 18px 40px; color:#87b3eb;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Upbit</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Upbit</span>
<span>Upbit · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5b52ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5b52ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b0acfa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5b52ff; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5b52ff; color: #f5f5f5;
border: 1px solid #746cfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b0acfa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #756eff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#5b52ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #746cfd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#b0acfa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#b0acfa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5b52ff; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#756eff; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #746cfd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#b0acfa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #746cfd; padding: 18px 40px; color:#b0acfa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Upstage</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Upstage</span>
<span>Upstage · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3a3a3a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #3a3a3a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #090909; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3a3a3a; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #3a3a3a; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#090909; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">VSCO (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© VSCO (iOS)</span>
<span>VSCO (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #40e2de; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #40e2de; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #266f6d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #102135; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #40e2de; color: #102135;
border: 1px solid #102135; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #40e2de; color: #111111;
border: 1px solid #38c1bd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #266f6d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #38c3c3; color: #102135;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#40e2de; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #38c1bd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#266f6d; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#266f6d; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#102135; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#40e2de; color:#102135;
border:1px solid #102135; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#38c3c3; color:#102135;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #38c1bd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#266f6d; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #38c1bd; padding: 18px 40px; color:#266f6d;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">VUNO</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© VUNO</span>
<span>VUNO · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #008cff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #008cff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87c6fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2f2f2; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #008cff; color: #f2f2f2;
border: 1px solid #f2f2f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #008cff; color: #f5f5f5;
border: 1px solid #279dfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87c6fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #279cfd; color: #f2f2f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#008cff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #279dfd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87c6fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87c6fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f2f2f2; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#008cff; color:#f2f2f2;
border:1px solid #f2f2f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#279cfd; color:#f2f2f2;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #279dfd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87c6fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #279dfd; padding: 18px 40px; color:#87c6fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Venmo (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Venmo (iOS)</span>
<span>Venmo (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #171717; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #171717; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #919191; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #171717; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #171717; color: #f5f5f5;
border: 1px solid #3b3b3b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #919191; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #21233a; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#171717; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3b3b3b;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#919191; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#919191; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#171717; color:#5865f2;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#21233a; color:#5865f2;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3b3b3b; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#919191; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3b3b3b; padding: 18px 40px; color:#919191;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Vercel</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Vercel</span>
<span>Vercel · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #171717;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #171717;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 32px; letter-spacing: -0.96px; margin: 0; color: #171717; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 20px; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 24px; background: #171717; color: #ffffff;
border: none; border-radius: 100px; padding: 0px {spacing.sm};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 24px; background: #ffffff; color: #171717;
border: 1px solid #171717; border-radius: 100px;
padding: 0px {spacing.sm}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: -0.28px; background: #ffffff; color: #171717;
border: 1px solid #ebebeb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 16px; background: #fafafa; color: #4d4d4d;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#171717; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dfdfdf;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 32px; letter-spacing: -0.96px; font-size: 18px; margin:0; }
.navlinks { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 20px; display:flex; gap:28px; color:#888888; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 600; line-height: 48px; letter-spacing: -2.4px; margin:0; max-width:640px; color:#171717; }
.hero p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 20px; margin:0; max-width:520px; color:#888888; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 24px; background:#171717; color:#ffffff;
border:none; border-radius:100px; padding:0px {spacing.sm};
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 24px; background:#ffffff; color:#171717;
border:1px solid #171717; border-radius:100px;
padding:0px {spacing.sm}; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 16px; background:#fafafa; color:#4d4d4d;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dfdfdf; border-radius: 100px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 32px; letter-spacing: -0.96px; font-size: 16px; margin:0; color:#171717; }
.feature-card p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 20px; margin:0; color:#888888; }
footer {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 20px; border-top:1px solid #dfdfdf; padding: 18px 40px; color:#888888;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Vercel</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Vercel</span>
<span>Vercel · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #191919; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #191919; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #040404; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#191919; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #191919; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#040404; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Vercel (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Vercel (iOS)</span>
<span>Vercel (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #232325; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #232325; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #060606; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#232325; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #232325; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#060606; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Vero (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Vero (iOS)</span>
<span>Vero (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7360f2; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7360f2; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #bab2f4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7360f2; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7360f2; color: #f5f5f5;
border: 1px solid #8878f2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bab2f4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #8979f4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#7360f2; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #8878f2;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#bab2f4; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#bab2f4; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#7360f2; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#8979f4; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #8878f2; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#bab2f4; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #8878f2; padding: 18px 40px; color:#bab2f4;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Viber (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Viber (iOS)</span>
<span>Viber (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0d0e12; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0d0e12; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d8d8f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffd24c; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0d0e12; color: #ffd24c;
border: 1px solid #ffd24c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0d0e12; color: #f5f5f5;
border: 1px solid #323336; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8d8f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #342d1b; color: #ffd24c;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0d0e12; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #323336;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8d8d8f; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8d8d8f; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffd24c; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0d0e12; color:#ffd24c;
border:1px solid #ffd24c; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#342d1b; color:#ffd24c;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #323336; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8d8d8f; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #323336; padding: 18px 40px; color:#8d8d8f;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Vimeo (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Vimeo (iOS)</span>
<span>Vimeo (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff485a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff485a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faa7af; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #141413; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff485a; color: #141413;
border: 1px solid #141413; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff485a; color: #f5f5f5;
border: 1px solid #fd6473; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faa7af; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d9404f; color: #141413;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff485a; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd6473;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#faa7af; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#faa7af; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#141413; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff485a; color:#141413;
border:1px solid #141413; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d9404f; color:#141413;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd6473; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#faa7af; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd6473; padding: 18px 40px; color:#faa7af;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Vocus</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Vocus</span>
<span>Vocus · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #25282b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #25282b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 24px; margin: 0; color: #25282b; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 800; line-height: 24px; margin: 0; color: #bebebe; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 28px; background: #e60000; color: #ffffff;
border: none; border-radius: 60px; padding: {spacing.md} {spacing.2xl};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 28px; background: #ffffff; color: #e60000;
border: 1px solid #e60000; border-radius: 60px;
padding: {spacing.md} {spacing.2xl}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; background: #ffffff; color: #25282b;
border: 1px solid #25282b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bebebe; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 21px; background: #f2f2f2; color: #25282b;
border-radius: 32px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#25282b; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #e0e1e1;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 24px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 800; line-height: 24px; display:flex; gap:28px; color:#bebebe; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 40px; font-weight: 300; line-height: 44px; margin:0; max-width:640px; color:#25282b; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 800; line-height: 24px; margin:0; max-width:520px; color:#bebebe; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 28px; background:#e60000; color:#ffffff;
border:none; border-radius:60px; padding:{spacing.md} {spacing.2xl};
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 28px; background:#ffffff; color:#e60000;
border:1px solid #e60000; border-radius:60px;
padding:{spacing.md} {spacing.2xl}; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 21px; background:#f2f2f2; color:#25282b;
border-radius:32px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #e0e1e1; border-radius: 60px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 24px; font-size: 16px; margin:0; color:#25282b; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 800; line-height: 24px; margin:0; color:#bebebe; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 800; line-height: 24px; border-top:1px solid #e0e1e1; padding: 18px 40px; color:#bebebe;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Vodafone</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Vodafone</span>
<span>Vodafone · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7e3aaf; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7e3aaf; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #bfa1d6; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #a73aaf; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7e3aaf; color: #ffffff;
border: 1px solid #a73aaf; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7e3aaf; color: #f5f5f5;
border: 1px solid #9158ba; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bfa1d6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #853aaf; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#7e3aaf; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #9158ba;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#bfa1d6; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#bfa1d6; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#a73aaf; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#7e3aaf; color:#ffffff;
border:1px solid #a73aaf; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#853aaf; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #9158ba; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#bfa1d6; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #9158ba; padding: 18px 40px; color:#bfa1d6;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">VoiceTube</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© VoiceTube</span>
<span>VoiceTube · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #101010; color: #f2f2f2;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #101010; color: #f2f2f2;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: -0.6px; margin: 0; color: #f2f2f2; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 18px; margin: 0; color: #8b949e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 24px; background: #00d992; color: #101010;
border: none; border-radius: 6px; padding: {spacing.md} {spacing.lg};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 24px; background: #101010; color: #f2f2f2;
border: 1px solid #3d3a39; border-radius: 6px;
padding: {spacing.md} {spacing.lg}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; background: #1a1a1a; color: #f2f2f2;
border: 1px solid #3d3a39; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b949e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 20px; background: #101010; color: #f2f2f2;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#101010; color:#f2f2f2; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #303030;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: -0.6px; font-size: 18px; margin:0; }
.navlinks { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 18px; display:flex; gap:28px; color:#8b949e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 36px; font-weight: 400; line-height: 40px; letter-spacing: -0.9px; margin:0; max-width:640px; color:#f2f2f2; }
.hero p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 18px; margin:0; max-width:520px; color:#8b949e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 24px; background:#00d992; color:#101010;
border:none; border-radius:6px; padding:{spacing.md} {spacing.lg};
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 24px; background:#101010; color:#f2f2f2;
border:1px solid #3d3a39; border-radius:6px;
padding:{spacing.md} {spacing.lg}; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 20px; background:#101010; color:#f2f2f2;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #303030; border-radius: 6px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: -0.6px; font-size: 16px; margin:0; color:#f2f2f2; }
.feature-card p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 18px; margin:0; color:#8b949e; }
footer {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 18px; border-top:1px solid #303030; padding: 18px 40px; color:#8b949e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">VoltAgent</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© VoltAgent</span>
<span>VoltAgent · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #22c55e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #22c55e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #96dfb1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00d992; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #22c55e; color: #000000;
border: 1px solid #00d992; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #22c55e; color: #000000;
border: 1px solid #44cd76; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #96dfb1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1dc866; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#22c55e; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #44cd76;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#96dfb1; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#96dfb1; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00d992; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#22c55e; color:#000000;
border:1px solid #00d992; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#1dc866; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #44cd76; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#96dfb1; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #44cd76; padding: 18px 40px; color:#96dfb1;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">VoltAgent</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© VoltAgent</span>
<span>VoltAgent · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #245abc; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #245abc;
border: 1px solid #245abc; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dce5f4; color: #245abc;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#245abc; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#245abc;
border:1px solid #245abc; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#dce5f4; color:#245abc;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Vrbo (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Vrbo (iOS)</span>
<span>Vrbo (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#292929; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">W Concept</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© W Concept</span>
<span>W Concept · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a0a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a0a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8b8b8b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00ff7b; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0a0a; color: #00ff7b;
border: 1px solid #00ff7b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a0a0a; color: #f5f5f5;
border: 1px solid #303030; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8b8b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #08311c; color: #00ff7b;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0a0a0a; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #303030;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8b8b8b; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8b8b8b; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00ff7b; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0a0a0a; color:#00ff7b;
border:1px solid #00ff7b; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#08311c; color:#00ff7b;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #303030; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8b8b8b; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #303030; padding: 18px 40px; color:#8b8b8b;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">WHOOP (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© WHOOP (iOS)</span>
<span>WHOOP (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#292929; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">WIRED</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© WIRED</span>
<span>WIRED · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 24px; letter-spacing: -0.28px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 12.73px; font-weight: 700; line-height: 28px; letter-spacing: 0.108px; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 20px; letter-spacing: 0.3px; background: #000000; color: #ffffff;
border: none; border-radius: 0px; padding: {spacing.md} {spacing.xl};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 20px; letter-spacing: 0.3px; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 0px;
padding: {spacing.md} {spacing.xl}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dbdbdb; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dbdbdb;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 24px; letter-spacing: -0.28px; font-size: 18px; margin:0; }
.navlinks { font-family: Georgia, "Times New Roman", Times, serif; font-size: 12.73px; font-weight: 700; line-height: 28px; letter-spacing: 0.108px; display:flex; gap:28px; color:#666666; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 48px; font-weight: 400; line-height: 50.4px; letter-spacing: -0.4px; margin:0; max-width:640px; color:#000000; }
.hero p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 12.73px; font-weight: 700; line-height: 28px; letter-spacing: 0.108px; margin:0; max-width:520px; color:#666666; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 20px; letter-spacing: 0.3px; background:#000000; color:#ffffff;
border:none; border-radius:0px; padding:{spacing.md} {spacing.xl};
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 20px; letter-spacing: 0.3px; background:#ffffff; color:#000000;
border:1px solid #000000; border-radius:0px;
padding:{spacing.md} {spacing.xl}; white-space:nowrap; cursor:default;
}
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background:#dbdbdb; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dbdbdb; border-radius: 0px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 24px; letter-spacing: -0.28px; font-size: 16px; margin:0; color:#000000; }
.feature-card p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 12.73px; font-weight: 700; line-height: 28px; letter-spacing: 0.108px; margin:0; color:#666666; }
footer {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 12.73px; font-weight: 700; line-height: 28px; letter-spacing: 0.108px; border-top:1px solid #dbdbdb; padding: 18px 40px; color:#666666;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">WIRED</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© WIRED</span>
<span>WIRED · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00c4c4; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00c4c4; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87dfdf; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #07abae; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00c4c4; color: #000000;
border: 1px solid #07abae; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00c4c4; color: #000000;
border: 1px solid #27cccc; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87dfdf; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #01c0c0; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00c4c4; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27cccc;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87dfdf; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87dfdf; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#07abae; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00c4c4; color:#000000;
border:1px solid #07abae; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#01c0c0; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27cccc; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87dfdf; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27cccc; padding: 18px 40px; color:#87dfdf;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Wadiz</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Wadiz</span>
<span>Wadiz · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2f8fd; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f2f8fd; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfeff; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f2f8fd; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#000000;
border:1px solid #f2f8fd; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fdfeff; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Walmart (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Walmart (iOS)</span>
<span>Walmart (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0066ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0066ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b5fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0066ff; color: #ffffff;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0066ff; color: #f5f5f5;
border: 1px solid #277dfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b5fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e66fd; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0066ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #277dfd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87b5fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87b5fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0066ff; color:#ffffff;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0e66fd; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #277dfd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87b5fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #277dfd; padding: 18px 40px; color:#87b5fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Wanted</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Wanted</span>
<span>Wanted · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #21bddb; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #21bddb; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #185e6c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #006f8e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #21bddb; color: #006f8e;
border: 1px solid #006f8e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #21bddb; color: #111111;
border: 1px solid #1ea1bb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #185e6c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1cb1cf; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#21bddb; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #1ea1bb;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#185e6c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#185e6c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#006f8e; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#21bddb; color:#006f8e;
border:1px solid #006f8e; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#1cb1cf; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #1ea1bb; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#185e6c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #1ea1bb; padding: 18px 40px; color:#185e6c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Wantedly</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Wantedly</span>
<span>Wantedly · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #01a4ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #01a4ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d1fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #faf9f6; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #01a4ff; color: #faf9f6;
border: 1px solid #faf9f6; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #01a4ff; color: #000000;
border: 1px solid #28b1fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d1fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #29b2fe; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#01a4ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #28b1fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87d1fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87d1fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#faf9f6; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#01a4ff; color:#faf9f6;
border:1px solid #faf9f6; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#29b2fe; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #28b1fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87d1fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #28b1fd; padding: 18px 40px; color:#87d1fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Warp</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Warp</span>
<span>Warp · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2b2622; color: #f7f5f0;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2b2622; color: #f7f5f0;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 32px; letter-spacing: -0.4px; margin: 0; color: #f7f5f0; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 18px; margin: 0; color: #aea69c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; background: #f7f5f0; color: #2b2622;
border: none; border-radius: 3px; padding: {spacing.sm} {spacing.lg};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; background: #2b2622; color: #f7f5f0;
border: 1px solid #f7f5f0; border-radius: 3px;
padding: {spacing.sm} {spacing.lg}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; background: #383330; color: #f7f5f0;
border: 1px solid #3f3a36; border-radius: 3px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aea69c; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #48433f; color: #f7f5f0;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#2b2622; color:#f7f5f0; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #48433f;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 32px; letter-spacing: -0.4px; font-size: 18px; margin:0; }
.navlinks { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 18px; display:flex; gap:28px; color:#aea69c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 400; line-height: 52.8px; letter-spacing: -1.2px; margin:0; max-width:640px; color:#f7f5f0; }
.hero p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 18px; margin:0; max-width:520px; color:#aea69c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; background:#f7f5f0; color:#2b2622;
border:none; border-radius:3px; padding:{spacing.sm} {spacing.lg};
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; background:#2b2622; color:#f7f5f0;
border:1px solid #f7f5f0; border-radius:3px;
padding:{spacing.sm} {spacing.lg}; white-space:nowrap; cursor:default;
}
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background:#48433f; color:#f7f5f0;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #48433f; border-radius: 3px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 32px; letter-spacing: -0.4px; font-size: 16px; margin:0; color:#f7f5f0; }
.feature-card p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 18px; margin:0; color:#aea69c; }
footer {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 18px; border-top:1px solid #48433f; padding: 18px 40px; color:#aea69c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Warp</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Warp</span>
<span>Warp · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f82f62; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f82f62; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f69cb3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #de2a60; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f82f62; color: #000000;
border: 1px solid #de2a60; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f82f62; color: #f5f5f5;
border: 1px solid #f84f7a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f69cb3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f42e62; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f82f62; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #f84f7a;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f69cb3; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f69cb3; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#de2a60; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f82f62; color:#000000;
border:1px solid #de2a60; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#f42e62; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #f84f7a; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f69cb3; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #f84f7a; padding: 18px 40px; color:#f69cb3;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Watcha</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Watcha</span>
<span>Watcha · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1351f9; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1351f9; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8fabf7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3a6cff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1351f9; color: #ffffff;
border: 1px solid #3a6cff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1351f9; color: #f5f5f5;
border: 1px solid #376bf8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8fabf7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1955fa; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1351f9; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #376bf8;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8fabf7; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8fabf7; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3a6cff; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1351f9; color:#ffffff;
border:1px solid #3a6cff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#1955fa; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #376bf8; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8fabf7; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #376bf8; padding: 18px 40px; color:#8fabf7;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Wavve</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Wavve</span>
<span>Wavve · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7e55be; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7e55be; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #bfaddc; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #33ccff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7e55be; color: #33ccff;
border: 1px solid #33ccff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7e55be; color: #f5f5f5;
border: 1px solid #916fc7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bfaddc; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #7268c8; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#7e55be; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #916fc7;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#bfaddc; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#bfaddc; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#33ccff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#7e55be; color:#33ccff;
border:1px solid #33ccff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#7268c8; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #916fc7; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#bfaddc; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #916fc7; padding: 18px 40px; color:#bfaddc;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Waze (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Waze (iOS)</span>
<span>Waze (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ededed; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ededed; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #747474; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ededed; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ededed; color: #111111;
border: 1px solid #cacaca; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #747474; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f0f0f0; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ededed; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #cacaca;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#747474; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#747474; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ededed; color:#000000;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#f0f0f0; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #cacaca; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#747474; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #cacaca; padding: 18px 40px; color:#747474;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">WeChat (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© WeChat (iOS)</span>
<span>WeChat (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #146ef5; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #146ef5; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #90b8f5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #080808; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #146ef5; color: #080808;
border: 1px solid #080808; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #146ef5; color: #f5f5f5;
border: 1px solid #3884f5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #90b8f5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #125ecf; color: #080808;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#146ef5; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3884f5;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#90b8f5; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#90b8f5; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#080808; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#146ef5; color:#080808;
border:1px solid #080808; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#125ecf; color:#080808;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3884f5; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#90b8f5; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3884f5; padding: 18px 40px; color:#90b8f5;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Webflow</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Webflow</span>
<span>Webflow · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #080808;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #080808;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 31.2px; margin: 0; color: #080808; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 12px; letter-spacing: 0.6px; margin: 0; color: #898989; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 25.6px; letter-spacing: -0.16px; background: #080808; color: #ffffff;
border: none; border-radius: 4px; padding: {spacing.md} {spacing.xl};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 25.6px; letter-spacing: -0.16px; background: #ffffff; color: #080808;
border: 1px solid #d8d8d8; border-radius: 4px;
padding: {spacing.md} {spacing.xl}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 25.6px; letter-spacing: -0.16px; background: #ffffff; color: #080808;
border: 1px solid #d8d8d8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #898989; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 550; line-height: 15.36px; background: #146ef5; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#080808; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dcdcdc;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 31.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 12px; letter-spacing: 0.6px; display:flex; gap:28px; color:#898989; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 44.8px; font-weight: 600; line-height: 46.6px; margin:0; max-width:640px; color:#080808; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 12px; letter-spacing: 0.6px; margin:0; max-width:520px; color:#898989; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 25.6px; letter-spacing: -0.16px; background:#080808; color:#ffffff;
border:none; border-radius:4px; padding:{spacing.md} {spacing.xl};
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 25.6px; letter-spacing: -0.16px; background:#ffffff; color:#080808;
border:1px solid #d8d8d8; border-radius:4px;
padding:{spacing.md} {spacing.xl}; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 550; line-height: 15.36px; background:#146ef5; color:#ffffff;
border-radius:4px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dcdcdc; border-radius: 4px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 31.2px; font-size: 16px; margin:0; color:#080808; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 12px; letter-spacing: 0.6px; margin:0; color:#898989; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 12px; letter-spacing: 0.6px; border-top:1px solid #dcdcdc; padding: 18px 40px; color:#898989;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Webflow</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Webflow</span>
<span>Webflow · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1b9efb; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1b9efb; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #93cef8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #20d5c4; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1b9efb; color: #000000;
border: 1px solid #20d5c4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1b9efb; color: #f5f5f5;
border: 1px solid #3eacfa; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #93cef8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1ca7f2; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1b9efb; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3eacfa;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#93cef8; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#93cef8; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#20d5c4; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1b9efb; color:#000000;
border:1px solid #20d5c4; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#1ca7f2; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3eacfa; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#93cef8; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3eacfa; padding: 18px 40px; color:#93cef8;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Webull (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Webull (iOS)</span>
<span>Webull (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00cbd5; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00cbd5; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #096569; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00b8c1; color: #000000;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00cbd5; color: #000000;
border: 1px solid #00b8c1; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00cbd5; color: #111111;
border: 1px solid #03adb6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #096569; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00c8d2; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00cbd5; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #03adb6;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#096569; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#096569; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00b8c1; color:#000000;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00cbd5; color:#000000;
border:1px solid #00b8c1; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#00c8d2; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #03adb6; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#096569; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #03adb6; padding: 18px 40px; color:#096569;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Weverse</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Weverse</span>
<span>Weverse · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #25d366; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #25d366; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #1a6837; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #075e54; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #25d366; color: #075e54;
border: 1px solid #075e54; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #25d366; color: #111111;
border: 1px solid #22b458; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #1a6837; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #20c063; color: #075e54;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#25d366; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #22b458;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#1a6837; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#1a6837; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#075e54; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#25d366; color:#075e54;
border:1px solid #075e54; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#20c063; color:#075e54;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #22b458; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#1a6837; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #22b458; padding: 18px 40px; color:#1a6837;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">WhatsApp (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© WhatsApp (iOS)</span>
<span>WhatsApp (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #9fe870; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #9fe870; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #51723c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #163300; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #9fe870; color: #163300;
border: 1px solid #163300; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #9fe870; color: #111111;
border: 1px solid #88c661; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #51723c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #89cb5e; color: #163300;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#9fe870; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #88c661;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#51723c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#51723c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#163300; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#9fe870; color:#163300;
border:1px solid #163300; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#89cb5e; color:#163300;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #88c661; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#51723c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #88c661; padding: 18px 40px; color:#51723c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Wise</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Wise</span>
<span>Wise · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0e0f0c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0e0f0c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 31.2px; letter-spacing: -0.48px; margin: 0; color: #0e0f0c; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; margin: 0; color: #868685; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 24px; background: #9fe870; color: #0e0f0c;
border: none; border-radius: 24px; padding: {spacing.md} {spacing.xl};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 24px; background: #e8ebe6; color: #0e0f0c;
border: 1px solid #9fe870; border-radius: 24px;
padding: {spacing.md} {spacing.xl}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; background: #ffffff; color: #0e0f0c;
border: 1px solid #0e0f0c; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #868685; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 20px; background: #e2f6d5; color: #054d28;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0e0f0c; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #dddddd;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 31.2px; letter-spacing: -0.48px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; display:flex; gap:28px; color:#868685; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 40px; font-weight: 900; line-height: 34px; margin:0; max-width:640px; color:#0e0f0c; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; margin:0; max-width:520px; color:#868685; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 24px; background:#9fe870; color:#0e0f0c;
border:none; border-radius:24px; padding:{spacing.md} {spacing.xl};
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 24px; background:#e8ebe6; color:#0e0f0c;
border:1px solid #9fe870; border-radius:24px;
padding:{spacing.md} {spacing.xl}; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 20px; background:#e2f6d5; color:#054d28;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #dddddd; border-radius: 24px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 31.2px; letter-spacing: -0.48px; font-size: 16px; margin:0; color:#0e0f0c; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; margin:0; color:#868685; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; border-top:1px solid #dddddd; padding: 18px 40px; color:#868685;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Wise</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Wise</span>
<span>Wise · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7f7f7; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f7f7f7; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fefefe; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f7f7f7; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#000000;
border:1px solid #f7f7f7; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fefefe; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Wise (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Wise (iOS)</span>
<span>Wise (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff8d08; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff8d08; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c490d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1d1d1d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff8d08; color: #1d1d1d;
border: 1px solid #1d1d1d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff8d08; color: #111111;
border: 1px solid #d97909; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c490d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #db7b0b; color: #1d1d1d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff8d08; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d97909;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c490d; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c490d; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1d1d1d; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff8d08; color:#1d1d1d;
border:1px solid #1d1d1d; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#db7b0b; color:#1d1d1d;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d97909; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c490d; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d97909; padding: 18px 40px; color:#7c490d;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Wisetracker</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Wisetracker</span>
<span>Wisetracker · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0067ac; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0067ac; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b5d4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #20c4f4; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0067ac; color: #20c4f4;
border: 1px solid #20c4f4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0067ac; color: #f5f5f5;
border: 1px solid #277eb8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b5d4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0576b8; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0067ac; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #277eb8;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87b5d4; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87b5d4; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#20c4f4; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0067ac; color:#20c4f4;
border:1px solid #20c4f4; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0576b8; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #277eb8; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87b5d4; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #277eb8; padding: 18px 40px; color:#87b5d4;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Woori Bank</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Woori Bank</span>
<span>Woori Bank · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0057ae; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0057ae; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87aed5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0875e1; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0057ae; color: #ffffff;
border: 1px solid #0875e1; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0057ae; color: #f5f5f5;
border: 1px solid #2770b9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87aed5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #015cb6; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0057ae; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2770b9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87aed5; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87aed5; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0875e1; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0057ae; color:#ffffff;
border:1px solid #0875e1; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#015cb6; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2770b9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87aed5; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2770b9; padding: 18px 40px; color:#87aed5;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Workday</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Workday</span>
<span>Workday · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f54211; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f54211; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f5a48e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #262626; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f54211; color: #262626;
border: 1px solid #262626; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f54211; color: #f5f5f5;
border: 1px solid #f55f35; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f5a48e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d43e14; color: #262626;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f54211; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #f55f35;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f5a48e; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f5a48e; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#262626; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f54211; color:#262626;
border:1px solid #262626; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d43e14; color:#262626;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #f55f35; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f5a48e; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #f55f35; padding: 18px 40px; color:#f5a48e;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Wrtn</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Wrtn</span>
<span>Wrtn · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2f3336; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #2f3336; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #080809; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2f3336; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #2f3336; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#080809; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">X (Twitter) (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© X (Twitter) (iOS)</span>
<span>X (Twitter) (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #275cfd; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #275cfd; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #98b0f9; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2250f7; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #275cfd; color: #ffffff;
border: 1px solid #2250f7; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #275cfd; color: #f5f5f5;
border: 1px solid #4874fc; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #98b0f9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #265afc; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#275cfd; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #4874fc;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#98b0f9; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#98b0f9; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2250f7; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#275cfd; color:#ffffff;
border:1px solid #2250f7; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#265afc; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #4874fc; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#98b0f9; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #4874fc; padding: 18px 40px; color:#98b0f9;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">XREX</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© XREX</span>
<span>XREX · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff2442; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff2442; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fa97a4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e01f3d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff2442; color: #000000;
border: 1px solid #e01f3d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff2442; color: #f5f5f5;
border: 1px solid #fd455f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fa97a4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fa2341; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff2442; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd455f;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#fa97a4; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#fa97a4; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e01f3d; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff2442; color:#000000;
border:1px solid #e01f3d; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fa2341; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd455f; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#fa97a4; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd455f; padding: 18px 40px; color:#fa97a4;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Xiaohongshu</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Xiaohongshu</span>
<span>Xiaohongshu · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1b1c1f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #1b1c1f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #040405; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1b1c1f; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #1b1c1f; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#040405; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Yanolja</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Yanolja</span>
<span>Yanolja · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff1a1a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #ff1a1a;
border: 1px solid #ff1a1a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ffdada; color: #ff1a1a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff1a1a; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#ff1a1a;
border:1px solid #ff1a1a; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ffdada; color:#ff1a1a;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Yelp (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Yelp (iOS)</span>
<span>Yelp (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1d8bff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1d8bff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #94c5fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1d8bff; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1d8bff; color: #f5f5f5;
border: 1px solid #409cfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #94c5fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2685fd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1d8bff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #409cfd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#94c5fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#94c5fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1d8bff; color:#000000;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2685fd; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #409cfd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#94c5fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #409cfd; padding: 18px 40px; color:#94c5fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Yeogiotte</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Yeogiotte</span>
<span>Yeogiotte · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fa0050; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fa0050; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f787ab; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e00048; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fa0050; color: #000000;
border: 1px solid #e00048; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fa0050; color: #f5f5f5;
border: 1px solid #f9276a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f787ab; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f6004f; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fa0050; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #f9276a;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f787ab; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f787ab; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e00048; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fa0050; color:#000000;
border:1px solid #e00048; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#f6004f; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #f9276a; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f787ab; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #f9276a; padding: 18px 40px; color:#f787ab;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Yogiyo</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Yogiyo</span>
<span>Yogiyo · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0f0f0f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #0f0f0f;
border: 1px solid #0f0f0f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d9d9d9; color: #0f0f0f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0f0f0f; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#0f0f0f;
border:1px solid #0f0f0f; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d9d9d9; color:#0f0f0f;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">YouTube (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© YouTube (iOS)</span>
<span>YouTube (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #030303; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #030303; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #030303; color: #ffffff;
border: 1px solid #121212; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #030303; color: #f5f5f5;
border: 1px solid #2a2a2a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #050505; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#030303; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2a2a2a;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#888888; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#888888; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#121212; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#030303; color:#ffffff;
border:1px solid #121212; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#050505; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2a2a2a; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#888888; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2a2a2a; padding: 18px 40px; color:#888888;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">YouTube Music (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© YouTube Music (iOS)</span>
<span>YouTube Music (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0063d1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0063d1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b3e5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #333333; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0063d1; color: #ffffff;
border: 1px solid #333333; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0063d1; color: #f5f5f5;
border: 1px solid #277ad7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b3e5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #085bb8; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0063d1; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #277ad7;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87b3e5; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87b3e5; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#333333; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0063d1; color:#ffffff;
border:1px solid #333333; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#085bb8; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #277ad7; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87b3e5; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #277ad7; padding: 18px 40px; color:#87b3e5;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Yourator</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Yourator</span>
<span>Yourator · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5c46ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5c46ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b0a6fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f323ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5c46ff; color: #ffffff;
border: 1px solid #f323ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5c46ff; color: #f5f5f5;
border: 1px solid #7462fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b0a6fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #7440ff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#5c46ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #7462fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#b0a6fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#b0a6fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f323ff; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5c46ff; color:#ffffff;
border:1px solid #f323ff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#7440ff; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #7462fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#b0a6fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #7462fd; padding: 18px 40px; color:#b0a6fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">ZEPETO</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© ZEPETO</span>
<span>ZEPETO · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8f8f8f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #121212; color: #f5f5f5;
border: 1px solid #363636; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8f8f8f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #383838; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #363636;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8f8f8f; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8f8f8f; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#121212; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#383838; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #363636; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8f8f8f; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #363636; padding: 18px 40px; color:#8f8f8f;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">ZIGZAG</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© ZIGZAG</span>
<span>ZIGZAG · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#292929; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">ZOZOTOWN</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© ZOZOTOWN</span>
<span>ZOZOTOWN · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0068ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0068ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b6fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0068ff; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0068ff; color: #f5f5f5;
border: 1px solid #277ffd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b6fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2980ff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0068ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #277ffd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87b6fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87b6fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0068ff; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2980ff; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #277ffd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87b6fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #277ffd; padding: 18px 40px; color:#87b6fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Zalo (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Zalo (iOS)</span>
<span>Zalo (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4f00; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4f00; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faaa87; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4f00; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4f00; color: #f5f5f5;
border: 1px solid #fd6a27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faaa87; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e45327; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff4f00; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd6a27;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#faaa87; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#faaa87; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff4f00; color:#000000;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#e45327; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd6a27; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#faaa87; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd6a27; padding: 18px 40px; color:#faaa87;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Zapier</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Zapier</span>
<span>Zapier · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffefb; color: #201515;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffefb; color: #201515;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 30px; letter-spacing: -0.6px; margin: 0; color: #201515; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 14px; letter-spacing: 1px; margin: 0; color: #c5c0b1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 27px; background: #ff4f00; color: #fffefb;
border: none; border-radius: 12px; padding: {spacing.md} {spacing.xl};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 27px; background: #201515; color: #fffefb;
border: 1px solid #ff4f00; border-radius: 12px;
padding: {spacing.md} {spacing.xl}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 27px; background: #fffefb; color: #201515;
border: 1px solid #201515; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c5c0b1; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 24px; background: #f8f4f0; color: #201515;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fffefb; color:#201515; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #e0dddb;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 30px; letter-spacing: -0.6px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 14px; letter-spacing: 1px; display:flex; gap:28px; color:#c5c0b1; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 500; line-height: 48px; margin:0; max-width:640px; color:#201515; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 14px; letter-spacing: 1px; margin:0; max-width:520px; color:#c5c0b1; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 27px; background:#ff4f00; color:#fffefb;
border:none; border-radius:12px; padding:{spacing.md} {spacing.xl};
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 27px; background:#201515; color:#fffefb;
border:1px solid #ff4f00; border-radius:12px;
padding:{spacing.md} {spacing.xl}; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 24px; background:#f8f4f0; color:#201515;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #e0dddb; border-radius: 12px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 30px; letter-spacing: -0.6px; font-size: 16px; margin:0; color:#201515; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 14px; letter-spacing: 1px; margin:0; color:#c5c0b1; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 14px; letter-spacing: 1px; border-top:1px solid #e0dddb; padding: 18px 40px; color:#c5c0b1;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Zapier</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Zapier</span>
<span>Zapier · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1f73b7; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1f73b7; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #95bad9; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1f73b7; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1f73b7; color: #f5f5f5;
border: 1px solid #4188c1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #95bad9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4389c3; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1f73b7; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #4188c1;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#95bad9; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#95bad9; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1f73b7; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#4389c3; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #4188c1; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#95bad9; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #4188c1; padding: 18px 40px; color:#95bad9;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Zendesk Garden</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Zendesk Garden</span>
<span>Zendesk Garden · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0066ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0066ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b5fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6600; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0066ff; color: #ffffff;
border: 1px solid #ff6600; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0066ff; color: #f5f5f5;
border: 1px solid #277dfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b5fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2966d6; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0066ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #277dfd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87b5fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87b5fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff6600; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0066ff; color:#ffffff;
border:1px solid #ff6600; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2966d6; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #277dfd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87b5fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #277dfd; padding: 18px 40px; color:#87b5fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Zigbang</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Zigbang</span>
<span>Zigbang · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e23744; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #e23744;
border: 1px solid #e23744; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fadfe1; color: #e23744;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e23744; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#e23744;
border:1px solid #e23744; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fadfe1; color:#e23744;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Zomato (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Zomato (iOS)</span>
<span>Zomato (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0b5cff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0b5cff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8cb0fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00053d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b5cff; color: #00053d;
border: 1px solid #00053d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0b5cff; color: #f5f5f5;
border: 1px solid #3074fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8cb0fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #094ee0; color: #00053d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0b5cff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3074fd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8cb0fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8cb0fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#00053d; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0b5cff; color:#00053d;
border:1px solid #00053d; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#094ee0; color:#00053d;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3074fd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8cb0fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3074fd; padding: 18px 40px; color:#8cb0fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Zoom</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Zoom</span>
<span>Zoom · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #1a1a1a;
border: 1px solid #1a1a1a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dadada; color: #1a1a1a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#1a1a1a; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#1a1a1a;
border:1px solid #1a1a1a; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#dadada; color:#1a1a1a;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Zoom (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Zoom (iOS)</span>
<span>Zoom (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #161616; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #161616; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #919191; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fc6719; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #161616; color: #fc6719;
border: 1px solid #fc6719; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #161616; color: #f5f5f5;
border: 1px solid #3a3a3a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #919191; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3b2316; color: #fc6719;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#161616; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #3a3a3a;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#919191; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#919191; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fc6719; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#161616; color:#fc6719;
border:1px solid #fc6719; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#3b2316; color:#fc6719;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #3a3a3a; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#919191; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #3a3a3a; padding: 18px 40px; color:#919191;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Zwift (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Zwift (iOS)</span>
<span>Zwift (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eb5505; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eb5505; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f0ad89; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #eb5505; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #eb5505; color: #f5f5f5;
border: 1px solid #ed6f2b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f0ad89; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d3582b; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#eb5505; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #ed6f2b;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f0ad89; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f0ad89; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#5865f2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#eb5505; color:#000000;
border:1px solid #5865f2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d3582b; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #ed6f2b; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f0ad89; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #ed6f2b; padding: 18px 40px; color:#f0ad89;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">au</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© au</span>
<span>au · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #353535;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #353535;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: 0px; margin: 0; color: #353535; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.0; letter-spacing: 0px; background: #1a73e8; color: #ffffff;
border: none; border-radius: 4px; padding: 6px 14px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.0; letter-spacing: 0px; background: #ffffff; color: #1a73e8;
border: 1px solid #c0c0c0; border-radius: 4px;
padding: 6px 14px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; background: #ffffff; color: #353535;
border: 1px solid #dedede; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0px; background: #dae8fc; color: #6c8ebf;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#353535; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #e3e3e3;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: 0px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; display:flex; gap:28px; color:#767676; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 36px; font-weight: 700; line-height: 1.15; letter-spacing: -0.3px; margin:0; max-width:640px; color:#353535; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; margin:0; max-width:520px; color:#767676; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.0; letter-spacing: 0px; background:#1a73e8; color:#ffffff;
border:none; border-radius:4px; padding:6px 14px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.0; letter-spacing: 0px; background:#ffffff; color:#1a73e8;
border:1px solid #c0c0c0; border-radius:4px;
padding:6px 14px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0px; background:#dae8fc; color:#6c8ebf;
border-radius:2px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #e3e3e3; border-radius: 4px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: 0px; font-size: 16px; margin:0; color:#353535; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; margin:0; color:#767676; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; border-top:1px solid #e3e3e3; padding: 18px 40px; color:#767676;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">draw.io</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© draw.io</span>
<span>draw.io · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0064d2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #0064d2;
border: 1px solid #0064d2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6e6f8; color: #0064d2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0064d2; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#0064d2;
border:1px solid #0064d2; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d6e6f8; color:#0064d2;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">eBay (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© eBay (iOS)</span>
<span>eBay (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#292929; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">flex</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© flex</span>
<span>flex · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2864f0; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2864f0; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #99b4f3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2863ef; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2864f0; color: #ffffff;
border: 1px solid #2863ef; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2864f0; color: #f5f5f5;
border: 1px solid #497bf1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #99b4f3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2864f0; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#2864f0; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #497bf1;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#99b4f3; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#99b4f3; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2863ef; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2864f0; color:#ffffff;
border:1px solid #2863ef; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2864f0; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #497bf1; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#99b4f3; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #497bf1; padding: 18px 40px; color:#99b4f3;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">freee</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© freee</span>
<span>freee · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2a72e5; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2a72e5; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9abaee; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0957c8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2a72e5; color: #000000;
border: 1px solid #0957c8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2a72e5; color: #f5f5f5;
border: 1px solid #4a87e8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9abaee; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #256ee0; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#2a72e5; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #4a87e8;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#9abaee; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#9abaee; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0957c8; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2a72e5; color:#000000;
border:1px solid #0957c8; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#256ee0; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #4a87e8; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#9abaee; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #4a87e8; padding: 18px 40px; color:#9abaee;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">goorm</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© goorm</span>
<span>goorm · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4865; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4865; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faa7b4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e91e63; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4865; color: #000000;
border: 1px solid #e91e63; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4865; color: #f5f5f5;
border: 1px solid #fd647c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faa7b4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fb4165; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff4865; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd647c;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#faa7b4; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#faa7b4; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e91e63; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff4865; color:#000000;
border:1px solid #e91e63; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#fb4165; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd647c; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#faa7b4; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd647c; padding: 18px 40px; color:#faa7b4;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">happn (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© happn (iOS)</span>
<span>happn (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e8552d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e8552d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #efad9b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d14a26; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e8552d; color: #000000;
border: 1px solid #d14a26; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e8552d; color: #f5f5f5;
border: 1px solid #ea6f4d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #efad9b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e4532c; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#e8552d; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #ea6f4d;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#efad9b; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#efad9b; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#d14a26; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#e8552d; color:#000000;
border:1px solid #d14a26; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#e4532c; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #ea6f4d; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#efad9b; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #ea6f4d; padding: 18px 40px; color:#efad9b;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">iCHEF</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© iCHEF</span>
<span>iCHEF · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f04646; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f04646; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f3a6a6; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f06354; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f04646; color: #000000;
border: 1px solid #f06354; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f04646; color: #f5f5f5;
border: 1px solid #f16262; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f3a6a6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f04b48; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f04646; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #f16262;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f3a6a6; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f3a6a6; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f06354; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#f04646; color:#000000;
border:1px solid #f06354; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#f04b48; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #f16262; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f3a6a6; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #f16262; padding: 18px 40px; color:#f3a6a6;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">iCook</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© iCook</span>
<span>iCook · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #120a0e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #120a0e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8f8b8d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c6002b; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #120a0e; color: #c6002b;
border: 1px solid #c6002b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #120a0e; color: #f5f5f5;
border: 1px solid #363033; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8f8b8d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2f0813; color: #c6002b;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#120a0e; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #363033;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8f8b8d; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8f8b8d; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#c6002b; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#120a0e; color:#c6002b;
border:1px solid #c6002b; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#2f0813; color:#c6002b;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #363033; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8f8b8d; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #363033; padding: 18px 40px; color:#8f8b8d;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">iHeartRadio (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© iHeartRadio (iOS)</span>
<span>iHeartRadio (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #061232; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #061232; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #898f9d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3a82dd; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #061232; color: #3a82dd;
border: 1px solid #3a82dd; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #061232; color: #f5f5f5;
border: 1px solid #2c3651; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #898f9d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e244d; color: #3a82dd;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#061232; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2c3651;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#898f9d; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#898f9d; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3a82dd; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#061232; color:#3a82dd;
border:1px solid #3a82dd; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0e244d; color:#3a82dd;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2c3651; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#898f9d; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #2c3651; padding: 18px 40px; color:#898f9d;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">iKala</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© iKala</span>
<span>iKala · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6d6d6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#000000;
border:1px solid #000000; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d6d6d6; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">iMessage (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© iMessage (iOS)</span>
<span>iMessage (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #53b232; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #53b232; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #acd79d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #10a83b; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #53b232; color: #000000;
border: 1px solid #10a83b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #53b232; color: #000000;
border: 1px solid #6dbd51; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #acd79d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #48b033; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#53b232; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #6dbd51;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#acd79d; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#acd79d; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#10a83b; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#53b232; color:#000000;
border:1px solid #10a83b; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#48b033; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #6dbd51; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#acd79d; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #6dbd51; padding: 18px 40px; color:#acd79d;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">iPASS MONEY</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© iPASS MONEY</span>
<span>iPASS MONEY · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ef7014; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ef7014; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f2b990; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4b50; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ef7014; color: #000000;
border: 1px solid #ff4b50; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ef7014; color: #f5f5f5;
border: 1px solid #f08538; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f2b990; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f26a1e; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ef7014; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #f08538;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f2b990; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f2b990; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff4b50; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ef7014; color:#000000;
border:1px solid #ff4b50; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#f26a1e; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #f08538; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f2b990; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #f08538; padding: 18px 40px; color:#f2b990;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">idus (Backpackr)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© idus (Backpackr)</span>
<span>idus (Backpackr) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ef3f24; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ef3f24; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f2a397; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d63b22; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ef3f24; color: #000000;
border: 1px solid #d63b22; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ef3f24; color: #f5f5f5;
border: 1px solid #f05c45; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f2a397; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #eb3e24; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ef3f24; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #f05c45;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#f2a397; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#f2a397; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#d63b22; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ef3f24; color:#000000;
border:1px solid #d63b22; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#eb3e24; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #f05c45; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#f2a397; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #f05c45; padding: 18px 40px; color:#f2a397;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">kintone</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© kintone</span>
<span>kintone · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #4262ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #4262ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a4b3fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3652d8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4262ff; color: #ffffff;
border: 1px solid #3652d8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #4262ff; color: #f5f5f5;
border: 1px solid #5f7afd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a4b3fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #405ff9; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#4262ff; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #5f7afd;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#a4b3fa; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#a4b3fa; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#3652d8; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#4262ff; color:#ffffff;
border:1px solid #3652d8; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#405ff9; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #5f7afd; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#a4b3fa; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #5f7afd; padding: 18px 40px; color:#a4b3fa;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">maum.ai (ex-MindsLab)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© maum.ai (ex-MindsLab)</span>
<span>maum.ai (ex-MindsLab) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4c0a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4c0a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faa98b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fd9b12; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4c0a; color: #000000;
border: 1px solid #fd9b12; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4c0a; color: #f5f5f5;
border: 1px solid #fd6730; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faa98b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff590b; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ff4c0a; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #fd6730;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#faa98b; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#faa98b; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#fd9b12; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ff4c0a; color:#000000;
border:1px solid #fd9b12; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#ff590b; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #fd6730; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#faa98b; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #fd6730; padding: 18px 40px; color:#faa98b;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">mikan</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© mikan</span>
<span>mikan · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #d62872; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #d62872; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e799ba; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d9006c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d62872; color: #ffffff;
border: 1px solid #d9006c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #d62872; color: #f5f5f5;
border: 1px solid #db4987; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e799ba; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d62271; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#d62872; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #db4987;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#e799ba; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#e799ba; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#d9006c; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#d62872; color:#ffffff;
border:1px solid #d9006c; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#d62271; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #db4987; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#e799ba; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #db4987; padding: 18px 40px; color:#e799ba;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">momo Shopping</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© momo Shopping</span>
<span>momo Shopping · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #181b34; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #181b34;
border: 1px solid #181b34; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dadbdf; color: #181b34;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #d9d9d9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#7c7c7c; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#7c7c7c; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#181b34; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#181b34;
border:1px solid #181b34; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#dadbdf; color:#181b34;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #d9d9d9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#7c7c7c; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #d9d9d9; padding: 18px 40px; color:#7c7c7c;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">monday.com (iOS)</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© monday.com (iOS)</span>
<span>monday.com (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #41c9b4; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #41c9b4; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #27645a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2cb696; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #41c9b4; color: #000000;
border: 1px solid #2cb696; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #41c9b4; color: #111111;
border: 1px solid #39ac9a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #27645a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3ec6af; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#41c9b4; color:#111111; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #39ac9a;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#27645a; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#111111; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#27645a; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#2cb696; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#41c9b4; color:#000000;
border:1px solid #2cb696; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#3ec6af; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #39ac9a; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#111111; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#27645a; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #39ac9a; padding: 18px 40px; color:#27645a;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">note</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© note</span>
<span>note · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0096fa; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0096fa; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87caf7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0086e0; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0096fa; color: #000000;
border: 1px solid #0086e0; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0096fa; color: #f5f5f5;
border: 1px solid #27a5f9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87caf7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0093f6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0096fa; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #27a5f9;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#87caf7; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#87caf7; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0086e0; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#0096fa; color:#000000;
border:1px solid #0086e0; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#0093f6; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #27a5f9; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#87caf7; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #27a5f9; padding: 18px 40px; color:#87caf7;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">pixiv</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© pixiv</span>
<span>pixiv · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #212121; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #212121; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #969696; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #212121; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #212121; color: #f5f5f5;
border: 1px solid #434343; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #969696; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #454545; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#212121; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #434343;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#969696; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#969696; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#212121; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#454545; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #434343; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#969696; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #434343; padding: 18px 40px; color:#969696;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">teamLab</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© teamLab</span>
<span>teamLab · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #12b886; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #12b886; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8fdac3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #20c997; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #12b886; color: #000000;
border: 1px solid #20c997; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #12b886; color: #000000;
border: 1px solid #36c298; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8fdac3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #14bb89; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#12b886; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #36c298;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#8fdac3; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#8fdac3; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#20c997; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#12b886; color:#000000;
border:1px solid #20c997; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#14bb89; color:#000000;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #36c298; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#8fdac3; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #36c298; padding: 18px 40px; color:#8fdac3;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">velog</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© velog</span>
<span>velog · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a0a; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a0a; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 400; line-height: 28px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; margin: 0; color: #7d8187; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; background: #ffffff; color: #0a0a0a;
border: none; border-radius: 9999px; padding: {spacing.xs} {spacing.md};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; background: #0a0a0a; color: #ffffff;
border: 1px solid #212327; border-radius: 9999px;
padding: {spacing.sm} {spacing.lg}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; background: #1a1c20; color: #ffffff;
border: 1px solid #212327; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7d8187; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #2c2c2c; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0a0a0a; color:#ffffff; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #2c2c2c;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 400; line-height: 28px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; display:flex; gap:28px; color:#7d8187; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 400; line-height: 48px; letter-spacing: -1.2px; margin:0; max-width:640px; color:#ffffff; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; margin:0; max-width:520px; color:#7d8187; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; background:#ffffff; color:#0a0a0a;
border:none; border-radius:9999px; padding:{spacing.xs} {spacing.md};
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; background:#0a0a0a; color:#ffffff;
border:1px solid #212327; border-radius:9999px;
padding:{spacing.sm} {spacing.lg}; white-space:nowrap; cursor:default;
}
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background:#2c2c2c; color:#ffffff;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #2c2c2c; border-radius: 12px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 400; line-height: 28px; font-size: 16px; margin:0; color:#ffffff; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; margin:0; color:#7d8187; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; border-top:1px solid #2c2c2c; padding: 18px 40px; color:#7d8187;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">xAI</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© xAI</span>
<span>xAI · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f5; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #272727;
}
.brand { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; display:flex; gap:28px; color:#878787; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; margin:0; max-width:640px; color:#f5f5f5; }
.hero p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; max-width:520px; color:#878787; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#ffffff; color:#111111;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background:#000000; color:#ffffff;
border:1px solid #ffffff; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background:#292929; color:#ffffff;
border-radius:999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #272727; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; font-size: 16px; margin:0; color:#f5f5f5; }
.feature-card p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin:0; color:#878787; }
footer {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; border-top:1px solid #272727; padding: 18px 40px; color:#878787;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">xAI</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© xAI</span>
<span>xAI · Product · Company · Legal</span>
</footer>
</body></html>