first commit
This commit is contained in:
@@ -0,0 +1,311 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>searchgg · 디자인 토큰</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
|
||||
<style>
|
||||
:root {
|
||||
/* ── 표면 / 배경 ── */
|
||||
--bg: #ffffff;
|
||||
--bg2: #eef0f2;
|
||||
--surf: #ffffff;
|
||||
--surf2: #f1f3f5;
|
||||
--head: #f1f3f5; /* 패널 헤더바 */
|
||||
/* ── 경계선 ── */
|
||||
--line: #e4e6e9;
|
||||
--line2: #d2d6db;
|
||||
/* ── 텍스트 ── */
|
||||
--ink: #20242b; /* 본문 강조 */
|
||||
--t2: #5b626c; /* 보조 */
|
||||
--t3: #949aa3; /* 약한 / 캡션 */
|
||||
--t-table: #33373d; /* 표 셀 */
|
||||
--placeholder: #9aa1ab;
|
||||
/* ── 브랜드 / 시맨틱 ── */
|
||||
--point: #48515f; /* 메인 포인트(올리브/슬레이트) */
|
||||
--point-soft: rgba(72,81,95,.12);
|
||||
--positive: #48515f; /* 승 / 좋은 승률 */
|
||||
--negative: #e5484d; /* 패 / 데스 / 마감임박 */
|
||||
--up: #16a34a; /* 상승 추세 */
|
||||
--accent-blue: #2f6fed;/* 그래프 승률선 / 블루 엠블럼 */
|
||||
--gold: #c0901a; /* 영관 계급 / 챔피언 */
|
||||
/* ── 외부 채널 ── */
|
||||
--discord: #5865F2;
|
||||
--kakao: #FEE500;
|
||||
--kakao-ink: #191600;
|
||||
--chzzk: #00b6a0;
|
||||
--soop: #0064ff;
|
||||
--youtube: #e62117;
|
||||
/* ── 모양 ── */
|
||||
--r-xs: 4px; --r-sm: 5px; --r-md: 7px; --r-lg: 8px; --r-xl: 14px; --r-pill: 20px;
|
||||
/* ── 그림자 ── */
|
||||
--sh-card: 0 1px 2px rgba(0,0,0,.04);
|
||||
--sh-hover: 0 4px 14px rgba(0,0,0,.10);
|
||||
--sh-pop: 0 6px 22px rgba(0,0,0,.10);
|
||||
--sh-modal: 0 24px 70px rgba(0,0,0,.34);
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; background: var(--bg2); }
|
||||
body { font-family: 'Pretendard', sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }
|
||||
.num { font-family: 'Chakra Petch', sans-serif; }
|
||||
::-webkit-scrollbar { width: 0; height: 0; }
|
||||
|
||||
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px 80px; }
|
||||
|
||||
/* 헤더 */
|
||||
header.top { background: linear-gradient(135deg,#23262b,#2e333b); color: #fff; }
|
||||
header.top .inner { max-width: 1080px; margin: 0 auto; padding: 40px 28px 34px; }
|
||||
.kicker { font-family: 'Chakra Petch', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; color: rgba(255,255,255,.55); }
|
||||
header.top h1 { margin: 10px 0 0; font-size: 32px; font-weight: 800; letter-spacing: -.6px; }
|
||||
header.top p { margin: 9px 0 0; font-size: 14px; color: rgba(255,255,255,.72); line-height: 1.6; }
|
||||
.brand { font-family: 'Chakra Petch', sans-serif; font-weight: 700; letter-spacing: -.5px; }
|
||||
|
||||
section { margin-top: 40px; }
|
||||
.sec-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; margin-bottom: 20px; border-bottom: 2px solid var(--ink); }
|
||||
.sec-head h2 { margin: 0; font-size: 19px; font-weight: 800; }
|
||||
.sec-head .en { font-family: 'Chakra Petch', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--t3); }
|
||||
.sec-note { font-size: 13px; color: var(--t2); margin: -8px 0 18px; line-height: 1.6; }
|
||||
|
||||
/* 스와치 그리드 */
|
||||
.grid { display: grid; gap: 14px; }
|
||||
.g4 { grid-template-columns: repeat(4, 1fr); }
|
||||
.g3 { grid-template-columns: repeat(3, 1fr); }
|
||||
.g2 { grid-template-columns: repeat(2, 1fr); }
|
||||
|
||||
.swatch { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-card); }
|
||||
.swatch .chip { height: 76px; }
|
||||
.swatch .meta { padding: 10px 12px; }
|
||||
.swatch .nm { font-size: 13px; font-weight: 700; }
|
||||
.swatch .var { font-family: 'Chakra Petch', sans-serif; font-size: 11.5px; color: var(--t2); margin-top: 2px; }
|
||||
.swatch .hex { font-family: 'Chakra Petch', sans-serif; font-size: 11.5px; color: var(--t3); text-transform: uppercase; margin-top: 1px; }
|
||||
|
||||
/* 램프 */
|
||||
.ramp { display: flex; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-card); }
|
||||
.ramp > div { flex: 1; height: 64px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; font-family: 'Chakra Petch', sans-serif; font-size: 10px; color: rgba(255,255,255,.92); font-weight: 600; }
|
||||
|
||||
/* 타이포 표본 */
|
||||
.type-row { display: flex; align-items: baseline; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
|
||||
.type-row:last-child { border-bottom: none; }
|
||||
.type-row .label { width: 150px; flex-shrink: 0; font-size: 12px; color: var(--t3); font-weight: 600; }
|
||||
.type-row .label b { display: block; color: var(--t2); font-size: 12.5px; font-weight: 700; }
|
||||
.type-row .spec { width: 130px; flex-shrink: 0; font-family: 'Chakra Petch', sans-serif; font-size: 12px; color: var(--t3); }
|
||||
|
||||
/* 토큰 표 */
|
||||
table.tok { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-card); }
|
||||
table.tok th, table.tok td { text-align: left; padding: 11px 16px; font-size: 13px; border-bottom: 1px solid var(--line); }
|
||||
table.tok thead th { background: var(--surf2); font-size: 11px; font-weight: 700; color: var(--t3); letter-spacing: .3px; }
|
||||
table.tok tbody tr:last-child td { border-bottom: none; }
|
||||
table.tok td.k { font-family: 'Chakra Petch', sans-serif; font-weight: 700; color: var(--ink); width: 220px; }
|
||||
table.tok td.v { font-family: 'Chakra Petch', sans-serif; color: var(--t2); }
|
||||
.demo-box { display: inline-flex; align-items: center; gap: 10px; }
|
||||
|
||||
/* 컴포넌트 미니 */
|
||||
.comp-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--sh-card); }
|
||||
.btn { font-family: 'Pretendard', sans-serif; font-weight: 700; font-size: 13px; border-radius: var(--r-md); padding: 10px 16px; cursor: default; border: 1px solid var(--line2); }
|
||||
.btn.primary { background: var(--point); color: #fff; border: none; }
|
||||
.btn.ghost { background: #fff; color: #3a4049; }
|
||||
.pill { display: inline-block; padding: 6px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; border: 1px solid var(--line2); color: var(--t2); }
|
||||
.pill.on { background: var(--point); color: #fff; border-color: var(--point); }
|
||||
.tag { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; color: var(--point); background: var(--point-soft); }
|
||||
.codeblock { background: #1c1f24; color: #e7e9ec; border-radius: var(--r-lg); padding: 18px 20px; font-family: 'Chakra Petch', monospace; font-size: 12.5px; line-height: 1.7; overflow-x: auto; white-space: pre; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="top">
|
||||
<div class="inner">
|
||||
<div class="kicker">SEARCH.GG · DESIGN TOKENS</div>
|
||||
<h1><span class="brand">search<span style="color:#8b94a0">.gg</span></span> 디자인 토큰</h1>
|
||||
<p>서든어택 전적검색 서비스의 색·타이포·간격·컴포넌트 토큰 정의서입니다.<br/>밝은 표면 + 올리브/슬레이트 포인트, 숫자는 Chakra Petch, 본문은 Pretendard를 사용합니다.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="wrap">
|
||||
|
||||
<!-- 표면 / 텍스트 -->
|
||||
<section>
|
||||
<div class="sec-head"><h2>표면 & 텍스트</h2><span class="en">SURFACE / TEXT</span></div>
|
||||
<div class="grid g4" id="surface"></div>
|
||||
</section>
|
||||
|
||||
<!-- 브랜드 / 시맨틱 -->
|
||||
<section>
|
||||
<div class="sec-head"><h2>브랜드 & 시맨틱</h2><span class="en">BRAND / SEMANTIC</span></div>
|
||||
<p class="sec-note">포인트 컬러는 올리브-슬레이트 <b>#48515f</b> 하나로 통일합니다. 승/긍정은 포인트색, 패/데스/위험은 레드, 추세 상승은 그린을 씁니다.</p>
|
||||
<div class="grid g4" id="semantic"></div>
|
||||
</section>
|
||||
|
||||
<!-- 외부 채널 -->
|
||||
<section>
|
||||
<div class="sec-head"><h2>외부 채널</h2><span class="en">CHANNELS</span></div>
|
||||
<div class="grid g3" id="channel"></div>
|
||||
</section>
|
||||
|
||||
<!-- 계급 색 램프 -->
|
||||
<section>
|
||||
<div class="sec-head"><h2>계급 색 램프</h2><span class="en">MILITARY RANK</span></div>
|
||||
<p class="sec-note">사병(슬레이트) → 부사관(브론즈) → 준·위관(블루그레이) → 영관·장성(골드)으로 이어지는 군 계급 색입니다.</p>
|
||||
<div class="ramp" id="rankramp"></div>
|
||||
</section>
|
||||
|
||||
<!-- 랭크전 티어 -->
|
||||
<section>
|
||||
<div class="sec-head"><h2>랭크전 티어 색</h2><span class="en">RANKED TIER</span></div>
|
||||
<div class="ramp" id="tierramp"></div>
|
||||
</section>
|
||||
|
||||
<!-- 엠블럼 팔레트 -->
|
||||
<section>
|
||||
<div class="sec-head"><h2>클랜 엠블럼 팔레트</h2><span class="en">EMBLEM</span></div>
|
||||
<p class="sec-note">클랜 엠블럼 배경에 쓰는 8색. 심볼 색은 흰색 + 파스텔 4색을 조합합니다.</p>
|
||||
<div class="ramp" id="emblemramp" style="margin-bottom:12px"></div>
|
||||
<div class="ramp" id="symbolramp"></div>
|
||||
</section>
|
||||
|
||||
<!-- 타이포그래피 -->
|
||||
<section>
|
||||
<div class="sec-head"><h2>타이포그래피</h2><span class="en">TYPE</span></div>
|
||||
<p class="sec-note"><b>Pretendard</b> — 본문·UI 전반(400~800). <b>Chakra Petch</b> — 숫자·지표·라벨·로고(500/600/700).</p>
|
||||
<div class="comp-card" id="type"></div>
|
||||
</section>
|
||||
|
||||
<!-- 간격 / 라디우스 / 그림자 -->
|
||||
<section>
|
||||
<div class="sec-head"><h2>모양 & 깊이</h2><span class="en">RADIUS / SHADOW</span></div>
|
||||
<div class="grid g2">
|
||||
<table class="tok">
|
||||
<thead><tr><th>라디우스</th><th>값</th><th>용도</th></tr></thead>
|
||||
<tbody id="radius"></tbody>
|
||||
</table>
|
||||
<table class="tok">
|
||||
<thead><tr><th>그림자</th><th>용도</th></tr></thead>
|
||||
<tbody id="shadow"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 컴포넌트 -->
|
||||
<section>
|
||||
<div class="sec-head"><h2>핵심 컴포넌트</h2><span class="en">COMPONENTS</span></div>
|
||||
<div class="comp-card">
|
||||
<div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px">
|
||||
<span class="btn primary">기본 버튼</span>
|
||||
<span class="btn ghost">보조 버튼</span>
|
||||
<span class="pill on">선택됨</span>
|
||||
<span class="pill">필터 칩</span>
|
||||
<span class="tag">즐겜/친목팟</span>
|
||||
</div>
|
||||
<div style="display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--t2)">
|
||||
<span>승 <b class="num" style="color:var(--positive)">128승</b></span>
|
||||
<span>패 <b class="num" style="color:var(--negative)">74패</b></span>
|
||||
<span>K/D/A <b class="num"><span style="color:var(--ink)">24</span> / <span style="color:var(--negative)">11</span> / <span style="color:var(--point)">7</span></b></span>
|
||||
<span>추세 <b class="num" style="color:var(--up)">▲6</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CSS 토큰 코드 -->
|
||||
<section>
|
||||
<div class="sec-head"><h2>CSS 토큰</h2><span class="en">:ROOT</span></div>
|
||||
<p class="sec-note">아래 블록을 그대로 스타일시트 최상단에 붙여 넣어 사용합니다.</p>
|
||||
<div class="codeblock" id="csscode"></div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const surface = [
|
||||
['배경', '--bg', '#ffffff'], ['앱 배경', '--bg2', '#eef0f2'],
|
||||
['표면2', '--surf2', '#f1f3f5'], ['패널 헤더', '--head', '#f1f3f5'],
|
||||
['경계선', '--line', '#e4e6e9'], ['진한 경계', '--line2', '#d2d6db'],
|
||||
['본문 강조', '--ink', '#20242b'], ['보조 텍스트', '--t2', '#5b626c'],
|
||||
['약한 텍스트', '--t3', '#949aa3'], ['표 셀', '--t-table', '#33373d'],
|
||||
['플레이스홀더', '--placeholder', '#9aa1ab'], ['표면', '--surf', '#ffffff'],
|
||||
];
|
||||
const semantic = [
|
||||
['포인트', '--point', '#48515f'], ['포인트 소프트', '--point-soft', 'rgba(72,81,95,.12)'],
|
||||
['긍정 / 승', '--positive', '#48515f'], ['부정 / 패·데스', '--negative', '#e5484d'],
|
||||
['상승 추세', '--up', '#16a34a'], ['그래프 블루', '--accent-blue', '#2f6fed'],
|
||||
['골드 / 챔피언', '--gold', '#c0901a'], ['위험 / 마감임박', '--negative', '#e5484d'],
|
||||
];
|
||||
const channel = [
|
||||
['디스코드', '--discord', '#5865F2'], ['카카오 오픈챗', '--kakao', '#FEE500'],
|
||||
['치지직', '--chzzk', '#00b6a0'], ['숲 (SOOP)', '--soop', '#0064ff'],
|
||||
['유튜브', '--youtube', '#e62117'], ['카카오 잉크', '--kakao-ink', '#191600'],
|
||||
];
|
||||
const rankramp = ['#737d8a','#525c68','#b3712b','#9e6022','#566f8e','#415d7e','#c0901a','#ad800c','#9c7b1e','#7d6111'];
|
||||
const ranknames = ['이병','병장','하사','원사','준위','대위','소령','대령','준장','대장'];
|
||||
const tiers = [['브론즈','#a9743b'],['실버','#94a0aa'],['골드','#c4960f'],['마스터','#5b8a72'],['그랜드마스터','#4f6b8a'],['챌린저','#7a5bb0'],['랭커','#b25a2b'],['하이랭커','#b23b3b']];
|
||||
const emblem = ['#48515f','#2f6fed','#c0392b','#1f8a5b','#8e44ad','#d98a1f','#16708a','#33373d'];
|
||||
const symbols = [['#ffffff','흰'],['#ffe08a','골드'],['#ffd1d1','로즈'],['#bfe3ff','스카이'],['#c9f0d8','민트']];
|
||||
|
||||
const isLight = (hex) => {
|
||||
const h = hex.replace('#',''); if (h.length < 6) return false;
|
||||
const r = parseInt(h.slice(0,2),16), g = parseInt(h.slice(2,4),16), b = parseInt(h.slice(4,6),16);
|
||||
return (0.299*r + 0.587*g + 0.114*b) > 150;
|
||||
};
|
||||
const swatch = (nm, v, hex) => {
|
||||
const tc = isLight(hex) ? '#20242b' : '#fff';
|
||||
return `<div class="swatch"><div class="chip" style="background:${hex}"></div><div class="meta"><div class="nm">${nm}</div><div class="var">var(${v})</div><div class="hex">${hex}</div></div></div>`;
|
||||
};
|
||||
document.getElementById('surface').innerHTML = surface.map(s => swatch(...s)).join('');
|
||||
document.getElementById('semantic').innerHTML = semantic.map(s => swatch(...s)).join('');
|
||||
document.getElementById('channel').innerHTML = channel.map(s => swatch(...s)).join('');
|
||||
|
||||
document.getElementById('rankramp').innerHTML = rankramp.map((c,i) => `<div style="background:${c}">${ranknames[i]}</div>`).join('');
|
||||
document.getElementById('tierramp').innerHTML = tiers.map(([n,c]) => `<div style="background:${c};color:${isLight(c)?'#20242b':'#fff'}">${n}</div>`).join('');
|
||||
document.getElementById('emblemramp').innerHTML = emblem.map(c => `<div style="background:${c}">${c.slice(1)}</div>`).join('');
|
||||
document.getElementById('symbolramp').innerHTML = symbols.map(([c,n]) => `<div style="background:${c};color:#20242b;border-right:1px solid #e4e6e9">${n}</div>`).join('');
|
||||
|
||||
const types = [
|
||||
['페이지 타이틀', 'Pretendard 800 · 30px', '<span style="font-size:30px;font-weight:800;letter-spacing:-.6px">전적 검색</span>'],
|
||||
['섹션 헤더', 'Pretendard 800 · 19px', '<span style="font-size:19px;font-weight:800">시즌별 랭크전 전적</span>'],
|
||||
['패널 제목', 'Pretendard 800 · 15px', '<span style="font-size:15px;font-weight:800">클랜원</span>'],
|
||||
['본문', 'Pretendard 500 · 14px', '<span style="font-size:14px;font-weight:500">분위기 좋은 우리 클랜에 놀러오세요.</span>'],
|
||||
['보조 / 캡션', 'Pretendard 600 · 12px', '<span style="font-size:12px;font-weight:600;color:#5b626c">최근 14전 · 9승 5패</span>'],
|
||||
['지표 숫자', 'Chakra Petch 700 · 22px', '<span class="num" style="font-size:22px;font-weight:700">68<span style="font-size:14px">%</span></span>'],
|
||||
['라벨 / EN', 'Chakra Petch 700 · 11px · ls 2px', '<span class="num" style="font-size:11px;font-weight:700;letter-spacing:2px;color:#949aa3">RANKED</span>'],
|
||||
['로고', 'Chakra Petch 700 · ls -.5px', '<span class="brand" style="font-size:20px">search<span style="color:#48515f">.gg</span></span>'],
|
||||
];
|
||||
document.getElementById('type').innerHTML = types.map(([l,s,d]) =>
|
||||
`<div class="type-row"><div class="label"><b>${l}</b></div><div class="spec">${s}</div><div>${d}</div></div>`).join('');
|
||||
|
||||
const radius = [['--r-xs','4px','인풋·작은 배지'],['--r-sm','5px','기본 카드·패널'],['--r-md','7px','버튼·인풋'],['--r-lg','8px','큰 카드'],['--r-xl','14px','모달'],['--r-pill','20px','칩·태그']];
|
||||
document.getElementById('radius').innerHTML = radius.map(([k,v,u]) =>
|
||||
`<tr><td class="k">${k}</td><td class="v"><span class="demo-box"><span style="width:34px;height:24px;background:var(--point-soft);border:1px solid var(--line2);border-radius:${v}"></span>${v}</span></td><td>${u}</td></tr>`).join('');
|
||||
|
||||
const shadow = [['--sh-card','카드 기본'],['--sh-hover','카드 호버'],['--sh-pop','드롭다운·검색'],['--sh-modal','모달']];
|
||||
document.getElementById('shadow').innerHTML = shadow.map(([k,u]) =>
|
||||
`<tr><td class="k">${k}</td><td><span class="demo-box"><span style="width:46px;height:30px;background:#fff;border-radius:7px;box-shadow:var(${k})"></span><span style="color:var(--t2)">${u}</span></span></td></tr>`).join('');
|
||||
|
||||
document.getElementById('csscode').textContent =
|
||||
`:root {
|
||||
/* 표면 */
|
||||
--bg:#ffffff; --bg2:#eef0f2; --surf2:#f1f3f5; --head:#f1f3f5;
|
||||
--line:#e4e6e9; --line2:#d2d6db;
|
||||
/* 텍스트 */
|
||||
--ink:#20242b; --t2:#5b626c; --t3:#949aa3; --placeholder:#9aa1ab;
|
||||
/* 시맨틱 */
|
||||
--point:#48515f; --point-soft:rgba(72,81,95,.12);
|
||||
--positive:#48515f; --negative:#e5484d; --up:#16a34a;
|
||||
--accent-blue:#2f6fed; --gold:#c0901a;
|
||||
/* 채널 */
|
||||
--discord:#5865F2; --kakao:#FEE500; --chzzk:#00b6a0; --soop:#0064ff; --youtube:#e62117;
|
||||
/* 라디우스 */
|
||||
--r-xs:4px; --r-sm:5px; --r-md:7px; --r-lg:8px; --r-xl:14px; --r-pill:20px;
|
||||
/* 그림자 */
|
||||
--sh-card:0 1px 2px rgba(0,0,0,.04);
|
||||
--sh-hover:0 4px 14px rgba(0,0,0,.10);
|
||||
--sh-pop:0 6px 22px rgba(0,0,0,.10);
|
||||
--sh-modal:0 24px 70px rgba(0,0,0,.34);
|
||||
}
|
||||
|
||||
/* 폰트 */
|
||||
body { font-family:'Pretendard',sans-serif; }
|
||||
.num { font-family:'Chakra Petch',sans-serif; } /* 숫자·지표·라벨 */`;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user