ustream.tv
ustream.tv · 4 hours ago
SaveUnofficial A style guide made by SiteStyleGuide from saramin.co.kr’s public web pages. Not affiliated with or endorsed by 사람인. The real site is saramin.co.kr ↗
Unofficial style guide
사람인’s website (saramin.co.kr) uses Pretendard for its headings and body text. Its palette is led by Deep Royal Blue (#2D67FF), Deep Slate Blue (#373F57) and Midnight Blue (#292E41), with #000000 text on #FFFFFF. Captured from the live site on 4 November 2026.
Identity & metadata
What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.
In search results
나에게 딱 맞는 커리어만 매치, 사람인! | 취업, 채용, 커리어 매…
나에게 딱 맞는 커리어만 매치! 사람인에서 새로운 기회를 제안 받고 기업정보, 연봉정보, 면접후기 등 취업, 채용에 꼭 필요한 정보를 확인해보세요.
When shared
saramin.co.kr
나에게 딱 맞는 커리어만 매치, 사람인! | 취업, 채용, 커리어 매칭 플랫폼
나에게 딱 맞는 커리어만 매치! 사람인에서 새로운 기회를 제안 받고 기업정보, 연봉정보, 면접후기 등 취업, 채용에…
Logo & favicons
Found as: CSS background on .logo. PNG, 16 × 16.
On white
On black
On Deep Royal Blue
Light browser tab
Dark browser tab
Colour
Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.
Contrast is against the site’s text colour (#000000) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.
Background, text, border · .main_greetings_person .btn_greeting_link_my_siat, .cosmetic_link .baloon2
Background, border · .box_detail_depth .list .area_list .btn_three_depth.on, .TabBox .BtnType .Badge
Text, border · .recently_search_option .layer_inner .wrap_title .tooltip_inner .title, .btn_check input[type="checkbox"]+label
Text, background, border · .wrap_search_result .btn_search.active, .wrap_main_panel .default_option .btn_open_layer
Text, background, border · .ModalBox.simple_recruit .ModalCont .quick_btn>button, #sri_header .search .btn_ai_search
Text, border, background · #sri_index .links .items_normal li a .title, .search_panel_jobs .title
Text, background · .main_greetings_person .card_random_check .card_title, .ModalBox.modal_gig_end .gig_end_tit h4
Text, background · .TabBox .Select .BtnType:after, .TabBox .Select .BtnType .Badge
Text, background, border · .subway_result .tab_slider .carousel li.on button span, .ModalBox.simple_recruit .ModalCont .ipt_layer .area_select .btn_confirm
Text · .box_detail_depth .list .area_list .btn_three_depth, #sri_header .utility .btn_service svg
Text, border, graphic · .TabBox .BtnType, .TabBox .BtnType .Badge
Text, background, border · .wing ul li button:before, #sri_header .search .btn_search .keyword
Text, background, border · .TabBox .BtnType:disabled, .TabBox .BtnType:disabled .Badge
Text · .box_detail_depth .list .row_item.expand dt .btn_expand, .box_detail_depth .list .row_item.expand dt .btn_expand:hover
Text, background · .wing ul li button.on:before, .main_greetings .btn_greeting .border
Text, border · --coral110, .sri_btn_lg span.sri_btn_immediately
linear-gradient(89deg, #00A1F8 0.78%, #7F38FD 99.22%)
linear-gradient(89deg,#00a1f8 .78%,#7f38fd 99.22%)
linear-gradient(89deg,#7f38fd .78%,#00a1f8 99.22%)
Typography
Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.
Pretendard
Served from www.saraminimage.co.kr · weights 400, 600, 700 · body, headings, buttons · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
나에게 딱 맞는 커리어만 매치! 사람인에서 새로운 기회를 제안 받고 기업정보, 연봉정보, 면접후기 등 취업, 채용에 꼭 필요한 정보를 확인해보세요.
나에게 딱 맞는 커리어만 매치! 사람인에서 새로운 기회를 제안 받고 기업정보, 연봉정보, 면접후기 등 취업, 채용에 꼭 필요한 정보를 확인해보세요.
나에게 딱 맞는 커리어만 매치! 사람인에서 새로운 기회를 제안 받고 기업정보, 연봉정보, 면접후기 등 취업, 채용에 꼭 필요한 정보를 확인해보세요.
Get started
Read more about 사람인
Elements
The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.
Button
#sri_header .search .btn_ai_search · #00A1F8 · radius 20px
Corner radius
Shadows
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Breakpoints
On a scale of 0 to 1450 px.
Content widths (max-width)
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Questions
Quick answers, from the same capture as the rest of this guide.
Design tokens
Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.
/* saramin.co.kr design tokens, from SiteStyleGuide (https://sitestyleguide.com/saramin.co.kr) */
:root {
/* Colours */
--text: #000000;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-cool-off-white: #EAEDF4;
--colour-dark-grey: #666666;
--colour-near-black: #222222;
--colour-deep-royal-blue: #2D67FF;
--colour-deep-slate-blue: #373F57;
--colour-midnight-blue: #292E41;
--colour-light-slate-blue: #475067;
--colour-light-royal-blue: #4876EF;
--colour-dim-grey: #5C667B;
--colour-slate-grey: #67738E;
--colour-light-slate-grey: #8491A7;
--colour-light-steel-blue: #B4C0D3;
--colour-royal-blue: #566FEB;
--colour-deep-sky-blue: #02C6FF;
--colour-crimson: #D63131;
--gradient-1: linear-gradient(89deg, #00A1F8 0.78%, #7F38FD 99.22%);
--gradient-2: linear-gradient(89deg,#00a1f8 .78%,#7f38fd 99.22%);
--gradient-3: linear-gradient(89deg,#7f38fd .78%,#00a1f8 99.22%);
/* Typefaces */
--font-body: 'Pretendard', 'Malgun Gothic', 'dotum', 'gulim', sans-serif;
--font-headings: 'Pretendard', 'Malgun Gothic', 'dotum', 'gulim', sans-serif;
--font-buttons: 'Pretendard', 'Malgun Gothic', 'dotum', 'gulim', sans-serif;
/* Type scale */
--text-p: 14px;
--leading-p: 24px;
--text-button: 12px;
--leading-button: 20px;
--text-a: 12px;
--leading-a: 20px;
/* Shape */
--radius-1: 4px;
--radius-2: 16px;
--radius-3: 8px;
--radius-4: 50%;
--radius-5: 20px;
--radius-6: 12px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 945px;
--breakpoint-2: 1145px;
--breakpoint-3: 1279px;
--breakpoint-4: 1450px;
--max-width-1: 1260px;
--max-width-2: 1200px;
--max-width-3: 420px;
}
{
"site": "saramin.co.kr",
"source": "https://sitestyleguide.com/saramin.co.kr",
"text": "#000000",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Cool Off White",
"hex": "#EAEDF4",
"rgb": [
234,
237,
244
]
},
{
"name": "Dark Grey",
"hex": "#666666",
"rgb": [
102,
102,
102
]
},
{
"name": "Near Black",
"hex": "#222222",
"rgb": [
34,
34,
34
]
},
{
"name": "Deep Royal Blue",
"hex": "#2D67FF",
"rgb": [
45,
103,
255
]
},
{
"name": "Deep Slate Blue",
"hex": "#373F57",
"rgb": [
55,
63,
87
]
},
{
"name": "Midnight Blue",
"hex": "#292E41",
"rgb": [
41,
46,
65
]
},
{
"name": "Light Slate Blue",
"hex": "#475067",
"rgb": [
71,
80,
103
]
},
{
"name": "Light Royal Blue",
"hex": "#4876EF",
"rgb": [
72,
118,
239
]
},
{
"name": "Dim Grey",
"hex": "#5C667B",
"rgb": [
92,
102,
123
]
},
{
"name": "Slate Grey",
"hex": "#67738E",
"rgb": [
103,
115,
142
]
},
{
"name": "Light Slate Grey",
"hex": "#8491A7",
"rgb": [
132,
145,
167
]
},
{
"name": "Light Steel Blue",
"hex": "#B4C0D3",
"rgb": [
180,
192,
211
]
},
{
"name": "Royal Blue",
"hex": "#566FEB",
"rgb": [
86,
111,
235
]
},
{
"name": "Deep Sky Blue",
"hex": "#02C6FF",
"rgb": [
2,
198,
255
]
},
{
"name": "Crimson",
"hex": "#D63131",
"rgb": [
214,
49,
49
]
}
],
"fonts": [
{
"name": "Pretendard",
"stack": "\"Pretendard\", \"Malgun Gothic\", dotum, gulim, sans-serif",
"weights": [
400,
600,
700
],
"source": "Served from www.saraminimage.co.kr"
}
]
}
ustream.tv · 4 hours ago
Save
we.tl · 3 days ago
Save
obsproject.com · 4 days ago
Save
ctvnews.ca · 6 days ago
SaveCaptured from saramin.co.kr on 4 November 2026. SiteStyleGuide isn’t affiliated with or endorsed by 사람인; this guide describes the public website for reference.
Analytics cookies
We’d like to use Google Analytics cookies to count visits and see which pages are useful. Nothing is used for advertising.