Design System Inspiration of Sandoll

1. Visual Theme & Atmosphere

Sandoll (산돌) calls itself Korea's first font foundry. Its own company page says it was founded in 1984 and tells the origin plainly: 석금호, shocked that Korean text was being set on phototypesetting imported from Japan, founded 산돌타이포그라픽스, the country's first type foundry. Forty years on, the timeline on that page reads like a map of Korean screens and brands — Apple SD 산돌고딕 Neo shipped in OS X and iOS, the corporate typeface 삼성체 drawn with Samsung, bespoke families for Toss (토스 프로덕트 산스), LG and KT, and in October 2020 「Sandoll 그레타산스」, the Hangul companion to Typotheque's multilingual Greta Sans. The company states its purpose as building "a world where anyone can express themselves freely, the way Hangul removed the barrier of expressing thought in a foreign script." Today it runs two public faces: the foundry's corporate site (sandoll.co.kr) and Sandoll Cloud (산돌구름, sandollcloud.com), its font subscription platform, positioned as "모두의 창작을 위한 베스트 폰트 플랫폼".

The corporate site is an editorial white page (#ffffff) set entirely in the foundry's own type. Headings use SDGretaSans-hBd, the heavy cut of Sandoll Greta Sans, at 44px on the /story title and 34px on home section heads — the weight is drawn into the face, so font-weight computes 400. Body, navigation and actions use SDGretaSans-eRg at 16px on a generous 28.8px line. Text sits in near-black #1c1c1c, statement paragraphs in #333333. The page is monochrome except for one colour: Sandoll red #ff0600. It draws the outline and label of the 제작문의 (production inquiry) action, fills that action and the hero 포트폴리오 outline on hover, turns a header link red on hover, and marks the current section in the header. Cards are square-cornered behind a #eeeeee hairline, and no captured element carries a shadow.

Sandoll Cloud is a denser product in a second register: Sandoll Gothic Neo (SandollGothicNeo1Unicode) for every label, #333333 text, a blue #4173fa action pill that deepens to #345cc8, charcoal #1c1c1c for the selected ranking tab, #dddddd outlines and a pale #ebf0ff tint on story cards. The two sites share a company, not a palette.

Key Characteristics:

• One chromatic colour on the corporate site: #ff0600 for the primary action, hover fills and the current navigation item
• The foundry's own typefaces as UI type: SDGretaSans on corporate, Sandoll Gothic Neo on Sandoll Cloud, both streamed from Sandoll's own font service
• Heavy headlines through the SDGretaSans-hBd face rather than CSS weight
• Near-black #1c1c1c ink, #333333 statements, #3b3b3b footer text
• 4px corners on corporate actions, square cards with a #eeeeee hairline
• Sandoll Cloud: blue #4173fa 30px pills, 19px ranking tabs, a 28px search field, #ebf0ff story cards
• No shadows on any captured element

Primary tasks

• Commission a custom or corporate typeface through 제작문의
• Browse the portfolio of type-branding work
• Search Sandoll Cloud for a font and preview it in a catalogue card
• Compare the font ranking by sales (판매순) or activation (활성화순)
• Reach 1:1 support from Sandoll Cloud

2. Color Palette & Roles

Primary

• Sandoll Red (#ff0600): The primary. It is the only chromatic colour the corporate surfaces render, and it renders in every primary role there: the label and 1px outline of 제작문의, the site's inquiry action; the solid fill of 제작문의 on hover and press (with a white #ffffff label); the fill of the hero 포트폴리오 outline on hover; the hover colour of the header links; and the current-section item in the /story header. The reference homepage is sandoll.co.kr, so the corporate red carries primary.
• On Primary (#ffffff): The label on the red hover fill, and the canvas.

Ink & Neutrals

• Ink (#1c1c1c): Headings and default text on the corporate site; on Sandoll Cloud, the fill of the selected ranking tab and the hover of the 1:1 support action.
• Graphite (#333333): Large statement paragraphs on the corporate home; body text, carousel glyphs and the 1:1 support fill on Sandoll Cloud.
• Footer Ink (#3b3b3b): The corporate footer company line.
• Canvas (#ffffff): Page background on both sites.
• Hairline (#eeeeee): The 1px edge of corporate portfolio and story cards.

Sandoll Cloud (sandollcloud.com only)

• Cloud Action (#4173fa): Fill and border of the btn-sandoll pill (SD 라바 보러가기); hover, press and keyboard focus deepen it to Cloud Action Hover (#345cc8).
• Cloud Hairline (#dddddd): Outlines of the unselected ranking tab and the round carousel controls, and list-row dividers.
• Muted (#999999): Unselected ranking-tab label and the search field text.
• Cloud Surface (#ebf0ff): Story cards in the Cloud carousel.

Brand assets, not tokens

• Font specimens in Sandoll Cloud catalogue cards are products on display, not interface colour or type (see §3).
• The Sandoll wordmark was not measured; no logo colour is claimed.

3. Typography Rules

Font Family

• Corporate display: SDGretaSans-hBd — the heavy cut of Sandoll Greta Sans, used on the /story title and home section headings.
• Corporate body: SDGretaSans-eRg — the regular cut, used for body copy, navigation, cards and actions. The <body> element itself computes the site builder's system stack (Apple SD Gothic Neo, Malgun Gothic …); the text is set in SDGretaSans at the element level.
• Sandoll Cloud: SandollGothicNeo1Unicode — Sandoll Gothic Neo, used for every Cloud label, tab, input and heading.

Evidence classes

• Official product facts (sandoll.co.kr/about): 「Sandoll 그레타산스」 was developed in October 2020 as the Hangul version of Typotheque's Greta Sans family; Apple SD 산돌고딕 Neo shipped in Apple's OS X and iOS.
• Live surface use: SDGretaSans-eRg (372 observed uses), SDGretaSans-hBd (5) and SandollGothicNeo1Unicode (426), all loaded.
• Official distributed font assets: all three are streamed from Sandoll's own font service (…execute-api.ap-northeast-2.amazonaws.com/…/api/woff/drop_fontstream_woff).
• Font-catalogue evidence, excluded from tokens: the Cloud home also loads specimen faces (SDFONTMH_*, SDFONTSQ_12295-0, one use each) from a separate preview endpoint (…/api/woff/drop_preview_woff/). They render products inside catalogue cards and say nothing about the interface type.
• Declared only: SD November TT, Pretendard, Nanum Gothic and several icon fonts are declared with zero observed uses.
• Licence: SDGretaSans and Sandoll Gothic Neo are Sandoll's own typefaces; no licence text was opened this session, so their licence terms are unresolved here.

Hierarchy

Principles

• The foundry's type is the interface. Every captured label on both sites is set in a Sandoll typeface; never substitute a system font on a Sandoll surface.
• Weight lives in the face. Corporate headings compute font-weight: 400 and render heavy because they use the -hBd cut.
• Two sites, two families. SDGretaSans on sandoll.co.kr, Sandoll Gothic Neo on sandollcloud.com.

4. Component Stylings

Buttons

Inquiry Action (Primary, corporate)

• Rest: transparent, label #ff0600, border 1px solid #ff0600
• Radius 4px · padding 14px 30px · 126 × 53 · 16px / 400 SDGretaSans-eRg
• Hover and pressed: fill #ff0600, label #ffffff, border none (probe, after all 0.3s ease)
• Focus: no change measured
• Use: 제작문의 in the inquiry block of the corporate home, linking to /inquiry

Hero Outline Action (corporate)

• Rest: transparent, label #ffffff, border 1px solid #ffffff, over the hero image
• Radius 4px · padding 14px 22px · 131 × 59 · 14px / 400, letter-spacing 1px
• Hover and pressed: fill #ff0600, border #ff0600 (probe)
• Use: 포트폴리오

Cloud Action Pill (sandollcloud.com)

• Fill and border #4173fa, label #ffffff
• Radius 30px · padding 12px 20px · 200 × 60 · 14px / 400 Sandoll Gothic Neo
• Hover, pressed and keyboard focus: #345cc8 (probe)
• Use: SD 라바 보러가기 over the dark quote section

Cloud Dark Button (sandollcloud.com)

• Fill and border #333333, label #ffffff, icon with 8px gap
• Radius 6px · padding 12px 16px · 180 × 50
• Hover, pressed and keyboard focus: #1c1c1c (probe)
• Use: 1:1 문의하기

Cloud Carousel Control (sandollcloud.com)

• #ffffff with a 1px #dddddd border and #333333 glyph, 40 × 40, radius 50%

Tabs & Navigation

Header Navigation (corporate)

• 16px / 400 SDGretaSans-eRg, 40px cells, 14px side padding
• Rest: #ffffff over the hero; the probe read #666666 once the header had switched to its solid state
• Hover and pressed: #ff0600 (probe); focus: no change
• Selected: the current-section item on /story renders in #ff0600

Ranking Tabs (sandollcloud.com)

• Unselected: #ffffff, label #999999, border 1px solid #dddddd
• Selected: #1c1c1c, label #ffffff, border #1c1c1c
• Radius 19px · padding 5px 10px · 33px tall · 13px / 400
• Hover, pressed and focus: no change on either (probe)
• Use: 판매순 / 활성화순 above the font ranking

Inputs

Cloud Search Field (sandollcloud.com)

• Text #999999, radius 28px, padding 14.5px 48px, 670 × 52, 14px / 400

Cards

Portfolio Card (corporate)

• 1px solid #eeeeee, 0px radius, 393 × 298, no shadow (home and /story, 18 instances)

Cloud Story Card (sandollcloud.com)

• Fill #ebf0ff, 1px radius, 370 × 604

---

Verified: 2026-09-30 (deterministic collector capture of sandoll.co.kr, /story and sandollcloud.com, logged out, plus fixed keyboard-probe state reads and first-party context) Tier 1 sources: https://www.sandoll.co.kr/ ; https://www.sandoll.co.kr/story ; https://www.sandoll.co.kr/about ; https://www.sandollcloud.com/ Tier 2 sources: getdesign.md/sandoll (HTTP 200, "0 design.md files") and styles.refero.design/?q=sandoll (HTTP 200, the name appears only as the echoed query), requested 2026-09-30; no Tier 2 value used Conflicts unresolved: none

5. Layout Principles

Spacing System

• Corporate actions: 14px vertical padding; 30px sides on 제작문의, 22px on 포트폴리오
• Header links: 14px side padding in 40px cells
• Sandoll Cloud: 12px 20px on the action pill, 12px 16px on the dark button, 5px 10px on ranking tabs, 14.5px 48px in the search field

Grid & Container

• Corporate pages run a 1220px content column (section headings span 1220px) on a 1440px canvas, with full-bleed hero and dark footer bands.
• Sandoll Cloud centres a 1200px container (container-1200) with carousels of font and story cards.

Whitespace Philosophy

• Corporate air. Large heavy headings sit alone in white bands; the red action appears once, in its own block.
• Cloud density. Ranking tabs, carousels and list rows pack the catalogue so a designer can scan many faces quickly.

Border Radius Scale

• 0px — corporate cards
• 1px — Cloud story cards
• 4px — corporate actions
• 6px — Cloud dark button
• 19px — Cloud ranking tabs
• 28px — Cloud search field
• 30px — Cloud action pill
• 50% — Cloud carousel controls

6. Depth & Elevation

Shadow Philosophy: none of the 816 recorded elements computes a shadow. Separation comes from whitespace, hairlines and, on Cloud, a pale tint. Emphasis is colour on type: red on the corporate site, blue or charcoal on Cloud.

7. Do's and Don'ts

Do

• Reserve #ff0600 for the corporate primary action, hover fills and the current navigation item
• Set corporate text in SDGretaSans (-hBd for headings, -eRg for the rest) and Cloud text in Sandoll Gothic Neo
• Keep corporate actions at 4px corners and corporate cards square with a #eeeeee hairline
• Keep #4173fa on Sandoll Cloud's action pill, with #345cc8 for hover
• Mark the selected Cloud ranking tab with a #1c1c1c fill

Don't

• Spread the red across decoration; it is the corporate site's only chromatic colour
• Substitute a generic or system font for Sandoll's own type
• Carry the Cloud blue onto the corporate site, or the corporate red onto Cloud
• Add drop shadows; nothing captured has one
• Treat catalogue specimens as the interface typeface

8. Responsive Behavior

Breakpoints

Only the 1440px desktop layout was captured; breakpoints were not measured and are not specified here.

Touch Targets

• Corporate actions: 53px (제작문의) and 59px (포트폴리오) tall
• Header links: 40px cells
• Cloud: 60px action pill, 50px dark button, 52px search field, 40px carousel controls, 33px ranking tabs

Collapsing Strategy

Not captured. Both sites ship separate mobile markup (the corporate header carries new_header_overlay_mobile classes), but no narrow viewport was measured.

Image Behavior

Corporate hero and portfolio images carry no shadow at 1440px; nothing else about image behaviour was measured.

9. Agent Prompt Guide

Quick Color Reference

• Corporate primary / hover fill / current nav: Sandoll Red (#ff0600)
• Ink: #1c1c1c · statements: #333333 · footer: #3b3b3b
• Canvas: #ffffff · corporate hairline: #eeeeee
• Sandoll Cloud action: #4173fa (hover #345cc8) · Cloud hairline: #dddddd · muted: #999999 · story tint: #ebf0ff

Example Component Prompts

• "Corporate inquiry block on white: a 34px SDGretaSans-hBd heading in #1c1c1c (47.6px line), then a transparent action with a #ff0600 label and 1px #ff0600 border, 4px radius, 14px 30px padding, 16px SDGretaSans-eRg — '제작문의'. On hover it fills #ff0600 with a white label over 0.3s. No shadow."
• "Sandoll Cloud ranking tabs: selected pill #1c1c1c with white 13px Sandoll Gothic Neo label, 19px radius, 5px 10px padding; unselected #ffffff with #999999 label and 1px #dddddd border."
• "Sandoll Cloud action pill: #4173fa fill and border, white 14px label, 30px radius, 12px 20px padding, 60px tall; hover #345cc8."

Iteration Guide

1. Red is the corporate site's only colour, and it means action or current place
2. Sandoll type only: SDGretaSans on corporate, Sandoll Gothic Neo on Cloud
3. Heavy headings come from the -hBd face
4. Flat everywhere; hairlines #eeeeee (corporate) and #dddddd (Cloud)
5. Keep the Cloud blue and the corporate red on their own sites

---

10. Voice & Tone

Sandoll speaks as a craft authority that also wants to open type to everyone. The company page is declarative and historical; Sandoll Cloud is friendly and creator-facing.

Voice samples (verbatim, opened 2026-09-30):

• "산돌은 1984년 설립된 국내 최초의 폰트 파운드리입니다." — sandoll.co.kr/about
• "모두의 창작을 위한 베스트 폰트 플랫폼 | 산돌구름" — sandollcloud.com title
• "스토리 - 산돌 Sandoll Inc" — /story title

Forbidden register: hype that undercuts craft, exclamation-heavy marketing, colour for its own sake.

11. Brand Narrative

Sandoll's own timeline (sandoll.co.kr/about) begins in 1984, when 석금호 founded 산돌타이포그라픽스 as Korea's first type foundry after seeing Hangul set on imported Japanese phototypesetting. The same page records the milestones that made Sandoll typefaces part of daily Korean reading: Apple SD 산돌고딕 Neo in OS X and iOS; the founding of 산돌티움, a Hangul culture-goods company, in 2008; the corporate typeface 삼성체 with Samsung; 「Sandoll 그레타산스」 in October 2020 as the Hangul version of Typotheque's Greta Sans; bespoke families for Toss, LG and KT; the 산돌 사이시옷 type conference; and the rebranding of the Sandoll Cloud mobile app as 베이키. The company is 주식회사 산돌, led by 윤영호 and based in Seongsu-dong, Seoul (footer of sandoll.co.kr).

Its work runs on two tracks that the two websites mirror. Type branding — custom and corporate typefaces commissioned through 제작문의 — is presented on a restrained, red-accented corporate site. Sandoll Cloud (산돌구름) puts the library in front of every creator as a subscription platform, with its own blue action colour and Sandoll Gothic Neo interface.

(The reading that connects the two sites' designs to these two tracks is editorial interpretation, not a Sandoll statement.)

12. Principles

1. The sample is the pitch. Sandoll sets its own interfaces in its own typefaces. UI implication: never render a Sandoll surface in a substitute font.
2. One colour, one meaning. Red appears only where the corporate site asks for action or marks location. UI implication: keep everything else monochrome.
3. Emphasis on the letter. Heavy faces and colour on type do the emphasising. UI implication: no badges, glows or shadows for hierarchy.
4. Two registers. The foundry and the platform are deliberately distinct. UI implication: don't mix the corporate red with the Cloud blue.

13. Personas

Fictional archetypes informed by Sandoll's public audiences (brands commissioning type; Sandoll Cloud subscribers), not real people.

정민석, 38, 서울. Brand-identity director at an agency, commissioning a corporate typeface. Reads the foundry's restraint as proof of craft and goes straight to 제작문의.

이하늘, 27, 성남. Freelance designer and Sandoll Cloud subscriber. Uses search and the 판매순 / 활성화순 ranking to find a face fast and previews it in the catalogue card before licensing.

Yuki Tanaka, 33, Tokyo. Product designer choosing a Hangul face for a bilingual app; trusts Sandoll Gothic Neo because it already ships on Apple platforms.

14. States

Only these states were observed; nothing else is specified here.

The collector's own hover and focus frames for the corporate header links were read mid-transition (different values per link) and are superseded by the probe. No authored focus ring was observed on the corporate site. Error, empty, loading and success states were not captured.

15. Motion & Easing

The probe read these computed transitions: corporate actions (제작문의, 포트폴리오) all 0.3s ease; corporate header links color, background, border-color 0.3s ease-out; Sandoll Cloud action pill and 1:1 button all 0.3s ease; Cloud ranking tabs color, background-color, border-color 0.15s ease-in-out. Nothing else about motion (carousels, scroll effects) was measured; treat it as unspecified and honour prefers-reduced-motion in any build.