Design System Inspiration of SK텔레콤

1. Visual Theme & Atmosphere

SK텔레콤 is a Korean connectivity and consumer-technology company whose public ecosystem joins telecommunications with AI services and infrastructure. Its current corporate expression is less about a single consumer-app shell than a clear transition from the legacy meaning of “Telecom” toward Technology, Tomorrow, and Together: the company’s 2022 T-brand renewal describes the T form as an open door to the future, while its AI Company vision frames technology and services around benefiting customers. On the two supplied public surfaces, that forward-looking story resolves into an orderly, typographic corporate interface: loaded SKT Sans families, white or transparent fields, square controls, cool charcoal neutrals, and a saturated blue current-link treatment. The current company facts describe a continuing move toward an AI-infrastructure and full-stack AI-provider role; that strategic evolution is brand context, not a license to turn AI campaign visuals into web tokens.

Key characteristics:

• Public brand navigation uses #3A46CD for the current-page treatment, with #727887 as the observed filled top action.
• SKT Sans Text and SKT Sans Display are both loaded first-family faces on the supplied public pages.
• Captured actions are square (0px radius); 16px rounding is confined to observed media-tile links.
• The retained values describe the public home and brand-information page only, not T world, A., native apps, advertising, or a general SK텔레콤 product design system.

Primary tasks

• Read where the company is heading beyond telecom
• Look up what the renewed T brand stands for
• Download a published brand resource from the brand page

2. Color Palette & Roles

T Blue and T Red are named in SK텔레콤’s 2022 renewal story as brand colors, but the supplied computed-style evidence does not establish their official palette values or product roles. This reference therefore does not manufacture a T Blue hex or use a corporate color story to overwrite the measured public-link values above.

3. Typography Rules

Evidence classes

Captured public hierarchy

4. Component Stylings

Brand navigation link

Current page

• Background: transparent
• Text: #3A46CD
• Border: none
• Radius: 0px
• Padding: 0px (168px × 20px)
• Font: 16px / 600 / SKT Sans Text
• Use: surface-2::[data-omd-capture="11"] (a.depth2-link depth2-brand is-active), the static current-page link in the brand-page local navigation; it is the selected state of the LNB link below.
• Corrected 2026-09-30: the July text gave this link 0px 12px padding. Capture 11 computes 0px; the 12px inline padding belongs to the section links in the brand-page header (see below).

Resource download link

Default

• Background: transparent
• Text: #1A2232
• Border: 1px solid #727887
• Radius: 0px
• Padding: 11px 24px
• Font: 13px / 600 / SKT Sans Text
• Use: surface-2::[data-omd-capture="13"] and "14", public brand-page download links

Outline title link

Default

• Background: transparent
• Text: #595E6B
• Border: 1px solid #D0D1D3
• Radius: 0px
• Padding: 6px 12px 6px 16px
• Height: 34px
• Font: 12px / 600 / SKT Sans Text
• Use: home::[data-omd-capture="39"] and surface-2::[data-omd-capture="70"], public footer/title links

Top action

Desktop/tablet default

• Background: #727887
• Text: #FFFFFF
• Radius: 0px
• Padding: 1px 6px
• Height: 58px
• Font: 10px / 700 / SKT Sans Text
• Use: home::[data-omd-capture="29"] and surface-2::[data-omd-capture="60"], public desktop/tablet top action

Corrected 2026-09-30: the July text here said the state-suffixed snapshots could not be promoted because the interactions array is empty and interactionCount is zero. That count covers dialog, tab and menu expansions, not pointer states. The bundle holds 62 state frames on 37 elements; the settled ones are declared below, and the rest are listed with the reason in .verification.md (2026-09-30 appendix).

The components below were transcribed on 2026-09-30 from the same 2026-07-13 bundle; nothing was re-measured.

Brand section link

• Background: transparent
• Text: #595E6B
• Font: 16px / 600 / SKT Sans Text, line height 20px
• Radius: 0px; padding 0px 12px; height 74px (59px to 90px wide)
• Selected: the link carrying class is-active (capture 1, the current section on this route) computes #3A46CD and weight 700. No aria-selected is recorded, so the pairing rests on the class name.
• Hover: text #3A46CD, weight 700
• Pressed: text #3A46CD, weight 700
• States: capture 2's hover and pressed frames record rgb(58, 70, 205) and weight 700, exactly the rest values of the is-active link. Captures 3 to 6 record weight 700 in every frame, but their colours (rgb(87, 93, 112) and similar in hover and pressed, rgb(79, 86, 138) in focus) lie on the line from the rest #595E6B toward #3A46CD, so they are transition frames. The weight change is settled on all five links and the colour on the one that finished. Focus is not declared from the bundle.
• Use: a.sub-depth1-link in the brand-page header; evidence surface-2::[data-omd-capture="2"].

Brand LNB link

• Background: transparent
• Text: #727887
• Font: 16px / 600 / SKT Sans Text, line height 20px
• Radius: 0px; padding 0px; height 20px (168px wide)
• Selected: #3A46CD at the same weight (the brand current link above, capture 11).
• Hover: text #3A46CD
• Pressed: text #3A46CD
• States: all four unselected links (captures 8, 9, 10 and 12) record rgb(58, 70, 205) in every hover and pressed frame, with weight 600 in every frame. That is exactly the rest colour of the current link, so the value is settled. Their focus frames record the same colour; focus is not declared from the bundle.
• Use: a.depth2-link in the brand-page local navigation; evidence surface-2::[data-omd-capture="8"].

The LNB title above these links (p.lnb-title) computes #3A46CD, 26px / 700 / 36.4px, with a 4px #3A46CD bottom border and 3px bottom padding (99px × 43px). It is a heading, so it is recorded here rather than as a component.

Home service tile

• Radius: 16px
• Size: 260px wide, 114px to 228px tall
• Labels: child elements. p.title computes 20px / 700 / 26px (one tile: 18px / 700 / 27px) and p.desc 13px / 600 / 20.8px, tracking -0.13px. They compute #FFFFFF on most tiles, #1A2232 on two (item-safety, item-investor) and #3A46CD on one (item-adot), so no single text colour is declared.
• States: all 13 tiles record a pressed frame in which the anchor's own colour moves from rgb(0, 0, 238) to rgb(255, 0, 0), Chromium's default link and active-link colours. The anchor's text is set by its child p elements, so that colour never renders, and no pressed value is declared.
• Use: a.item intro-imgNN-target on home; evidence home::[data-omd-capture="0"] to "12".

Newsroom card

• Radius: 0px
• Size: 311px × 271px (news cards 248px to 271px tall)
• Text: #1A2232, 14px / 500 / 22.4px (the child p.text, 295px wide)
• States: the eight cards (captures 13 to 20: four a.newsroom-link, four a.news-link) record pressed frames that move only the anchor's default link colour (rgb(0, 0, 238) to rgb(255, 0, 0)), which the child text does not use; no pressed value is declared.
• Use: home newsroom and news lists; evidence home::[data-omd-capture="13"].

Footer menu link

• Background: transparent
• Text: #3A404E
• Font: 14px / 500 / SKT Sans Text, line height 20px, tracking -0.56px
• Radius: 0px; padding 0px; height 20px (51px to 89px wide)
• States: rest captured on home (captures 21 to 23) and on the brand page (captures 52 to 54). The three home links' hover and pressed frames all record rgb(23, 26, 32). That point lies on the line from the rest #3A404E to #000000: 58, 64, 78 × 0.404 gives 23.43, 25.86, 31.51, which rounds to 23, 26, 32. It is therefore treated as a transition frame, and no hover or pressed value is declared.
• Use: first footer row; evidence home::[data-omd-capture="21"].

Footer link

• Background: transparent
• Text: #727887
• Font: 12px / 600 / SKT Sans Text, line height 20px, tracking -0.48px
• Radius: 0px; padding 0px; height 20px
• Strong variant: the first link (a.link strong, capture 31) computes #3A404E at the same size and weight.
• States: default only; no state frame.
• Use: a.link in the footer policy row; evidence home::[data-omd-capture="32"] (also captures 33 to 38, and brand-page captures 62 to 69). The copyright line (p.copy) computes #727887, 12px / 600 / 21.6px.

Brand content row

• Background: transparent
• Border: 15 rows carry a 1px #ECEDEF top border with 24px top padding (24px 24px 0px 0px); 22 rows have neither (0px 24px 0px 0px)
• Size: 850px wide
• Title: #3A404E, 15px / 600 / 27px (the child p.tit, 599px wide, matched by top offset)
• States: default only; no state frame.
• Use: button.content rows on the brand page; evidence surface-2::[data-omd-capture="18"] (bordered) and "15" (unbordered). The root computes the inherited body text (#000000, 10px / 400 / 11.5px), so no label style is taken from it.

Verified: 2026-07-13 Tier 1 sources: https://www.sktelecom.com/ | https://www.sktelecom.com/view/introduce/brand.do Tier 2 sources: https://getdesign.md/sktelecom (attempted; no usable response) | https://styles.refero.design/?q=SK%20Telecom (attempted; no usable response) Conflicts unresolved: none

5. Layout Principles

The supplied desktop captures (1440×900) use spacing clusters of 6, 12, 16, 24, and 40px. On the brand page, 24px and 40px recur around content controls and information groups; they are measured spacing values, not proof of a complete modular grid. The current-page navigation uses compact 16px text with 12px inline padding, while resource links expand horizontally through 11px × 24px padding. Preserve this contrast between dense navigation and spacious resource actions rather than inventing a mobile grid or a universal card layout.

6. Depth & Elevation

All retained component representatives report box-shadow: none. That supports a flat treatment for these public brand-page links and top action. It does not establish that SK텔레콤 product, marketing, retail, native-app, or campaign interfaces never use shadow, gradients, imagery, or elevation.

7. Do's and Don'ts

Do

• Use SKT Sans Text or SKT Sans Display only when the supplied, SK텔레콤-hosted face is actually available and its deployment is permitted.
• Keep the measured current-page blue #3A46CD in the brand-navigation context from which it was captured.
• Retain the square, transparent outline treatment for the observed resource and footer/title links.
• Treat the 16px media-tile rounding as local to the observed tile links, not as a global control radius.

Don't

• Substitute a system font and label it SKT Sans.
• Convert T Blue, T Red, AI campaign art, or brand-story language into a measured UI token without direct evidence.
• Generalize the 58px desktop/tablet top action into a mobile primary button.
• Invent responsive breakpoints, input states, dialogs, toast behavior, timing, easing, or component variants from static captures.

8. Responsive Behavior

The only supplied viewport is 1440×900. It establishes the listed desktop public-page values and does not establish a mobile type scale, breakpoints, stacking, touch target, or responsive component contract. Re-measure the actual target surface before assigning those values.

9. Agent Prompt Guide

For a public SK텔레콤 corporate-information composition, use the verified language narrowly: a typographic, flat, square-cornered frame; SKT Sans Text for available compact body/navigation copy; SKT Sans Display for the observed display treatment; dark charcoal links; and a saturated #3A46CD current-page navigation cue. Use transparent resource links with 1px neutral outlines and a #727887/white top action only in their measured desktop/tablet contexts. Keep the T-brand “open door” and AI Company material as narrative direction rather than color-token instructions. Do not present fallback fonts, unmeasured T Blue/T Red values, or unobserved app controls as SK텔레콤 facts.

10. Voice & Tone

Official material frames SK텔레콤’s current direction around technology and services that benefit customers, an “OPEN” motif, and a transition toward AI infrastructure and services. The usable voice is forward-looking, useful, and direct; it should explain a concrete benefit or next step rather than rely on empty futurism.

Illustrative tone samples (characterization, not source copy):

• “Choose the service that helps you stay connected today.”
• “Explore the technology and information behind the next step.”
• “See how this service can make a customer task clearer.”

11. Brand Narrative

SK텔레콤’s current story begins with connectivity but is explicitly moving beyond a telecommunications-only frame. In its 2022 vision announcement, the company described its direction as becoming an AI Company that benefits customers through technology and services. The associated T/B brand renewal gives that turn a visible motif: “OPEN,” represented by an open-door form and a redefinition of T through Technology, Tomorrow, and Together.

That shift remains active rather than historical. A 2026 official fact sheet describes SK텔레콤 as advancing toward an AI-infrastructure architect and full-stack AI provider, joining technology, infrastructure, and services while redesigning products around customers. The two captured public pages should be read as corporate and brand-information surfaces within that broader evolution; they do not document the UI systems of each consumer service.

12. Principles

1. Make technology useful to customers. SK텔레콤’s AI Company vision explicitly links technology and services with customer benefit. UI implication: explain the user outcome beside a technical feature; do not let a technical label do all the work.

2. Keep the future open and legible. The 2022 renewal uses “OPEN” and an open door as its design motif. UI implication: use clear pathways and named actions, while treating this as narrative guidance rather than a measured layout rule.

3. Connect infrastructure, services, and society without conflating their surfaces. The current fact sheet spans customer AI, national AI infrastructure, and continued internal transformation. UI implication: preserve source-domain labels; a corporate infrastructure claim does not supply a consumer-product token.

4. Pair innovation with responsibility. The current fact sheet places “DO THE GOOD AI” in SK텔레콤’s ESG context. UI implication: when communicating AI, state the applicable benefit, boundary, or responsibility instead of using generic assurance language.

13. Personas

The following are stakeholder archetypes derived from official strategy descriptions, not research-backed individual personas or claims about a specific app’s users.

Connected customer

Someone choosing or using SK텔레콤 services and looking for a clear benefit from connectivity or AI-enabled support. Use direct explanations and avoid making infrastructure terminology the only way to understand a task.

Enterprise or industry collaborator

An organization evaluating AI infrastructure, transformation, or service capabilities. Keep product/service claims, architecture information, and partnership context distinct from consumer-interface guidance.

Korean AI ecosystem stakeholder

A public, institutional, or industry participant concerned with the wider AI-infrastructure and sovereign-AI agenda described by SK텔레콤. Communicate scope and responsibility precisely; this is not evidence for a consumer-screen persona.

14. States

Pointer states are declared only where the 2026-07-13 bundle holds a settled frame. The brand LNB links and brand section links turn #3A46CD on hover and pressed (the section links also move to weight 700), and the current-page link of each list is its selected state (§4). Every other state frame is listed in .verification.md with the reason it is not declared: transition frames (section-link colours on four links, the footer menu links, the download links), Chromium's default link colours on container anchors, and focus frames, which are never declared from a bundle. The bundle records no dialog, tab, menu, toast or form interaction, and no selector-backed loading, empty, error, success, disabled or validation state. Corrected 2026-09-30: the July text said no component-state matrix could be retained because the bundle has zero interaction expansions; that count does not cover pointer-state frames, of which the bundle holds 62.

15. Motion & Easing

No duration, easing, transition, or animation token is retained. The supplied public-page capture has no interaction records, so motion behavior is unresolved at the smallest group boundary rather than approximated with a generic corporate motion scale.