리멤버 DESIGN.md

Design System Inspiration of Remember (리멤버)

Overview

Visual Theme & Atmosphere

Remember began with digitising business cards and has since expanded into a professional network that connects career opportunities, recruiting, community, and business relationships. The company describes its mission as connecting working people with opportunities for success; its company history records the 2014 app launch, 2019 recruiting launch, and 2024 company-name change to Remember & Company. On the supplied career-postings surface, that professional focus appears as dense, low-chrome information design: a white field, #222222 reading text, #000000 action elements, and narrow 4–6px corners. The separately captured corporate marketing site is deliberately more expressive, with #fc5d11 display accents; it is not evidence that orange is the career product’s default action color. The official identity guideline likewise reserves black and off-white for the logotype rather than defining a universal application palette.

Key characteristics:

• Dense, chromeless career listings rather than elevated cards.
• Career-product action black (#000000) and reading foreground (#222222).
• Border-led 4px filter controls on a white (#ffffff) surface.
• Loaded Pretendard on the career route, backed by Remember-hosted font files.
• A corporate-only orange (#fc5d11) display treatment, not a general CTA token.

Primary tasks

• Search the career postings for a role that fits
• Narrow the posting list with the filter controls
• Compare postings against each other in one dense list
• Read a posting for its qualification and its next action

Iconography & Imagery

The official identity guide defines a renewed R symbol containing the Remember Square and permits black and off-white logotype colours. It specifies usage, clear-space, and minimum-size rules for the logo, symbol, and app icon. Those brand-asset rules are not component tokens for the captured career web route.

Overall Personality

On the career surface, Remember is compact, professional, and scan-oriented: white space is functional rather than decorative, corners are restrained, and primary actions are high-contrast. The corporate site adds more expressive editorial scale and orange display accents, but the two surface purposes should not be blended into a single generic system.

Brand Narrative

Remember’s official company account starts with the business card: not merely paper, but a professional identity exchanged at moments of connection. The company says the service launched in 2014, then expanded from a “national business-card app” into career opportunities, community, and a professional-network direction.

Its stated mission is to connect working people with opportunities and lead them to success. The official timeline records a 2019 recruiting-service launch, a 2024 premium-job-posting launch, and the October 2024 name change to Remember & Company. These are company/history facts, not proof that every corporate page shares the career route’s CSS tokens.

Principles

1. Connect people and opportunities. UI implication: make the opportunity, qualification, and next action easy to scan.
2. Select high-quality, relevant opportunities. UI implication: use dense but legible comparison information instead of decorative marketing cards.
3. Help professionals be productive. UI implication: keep repeated controls and reading text quiet, consistent, and easy to parse.
4. Integrate related services. UI implication: preserve surface boundaries; shared branding does not authorise a token from one product purpose to overwrite another.

Personas

The official guideline’s archetype is an experienced, friendly career expert. The company’s public narrative also names professionals building career records, companies seeking talent, and people creating business connections. These are stakeholder groups from official positioning, not synthetic named user personas or behavioural metrics.

Colors

Career product surface

• Action Black (#000000): observed on the career header’s filled auth control and search submit. This is a career-route observation, not a whole-company rule.
• White Surface (#ffffff): observed filled header control and dialog surface.
• Reading Foreground (#222222): repeated career body, list, and filter-control text.
• Input Surface (#f2f2f2): observed career search field fill.
• Muted Text (#808080): observed career search input text/placeholder value.
• Hairline (#d4d4d4): observed 1px border on career filter controls.

Corporate marketing surface

• Corporate Orange (#fc5d11): observed corporate-home display-heading color. It remains local to that marketing surface.

Boundary

The July packet did not establish hover or focus colours; the 2026-09-29 live state probe did, on the career route only. Header product links turn #808080 on hover, press and keyboard focus; a 2px ::after bar in #ff6a0d marks the current section (a career-route value, distinct from the corporate #fc5d11); and three header and search buttons draw an authored #000000 2px focus ring. Product error, success, selected-filter, disabled, and authenticated-app colors remain omitted rather than inferred from older captures or adjacent Korean products.

Typography

Evidence classes

Captured hierarchy

Do not substitute a system font for Pretendard or a named Founders face. The corporate display sample is useful observational context, but not a reusable UI-family token.

Layout

Career route

• Repeated list and control text is 16px; captured spacing clusters include 4px, 8px, 12px, 16px, and 24px.
• The representative job item is 162px wide and chromeless. Preserve the content-led list rhythm rather than turning it into a generic elevated card grid.
• The search input reserves 56px on its leading edge; do not generalise that offset to unrelated inputs.

Corporate route

Corporate marketing typography and large display compositions are a separate surface. Its display treatment is not a layout specification for career search or signed-in product screens.

Elevation & Depth

The captured career list items and header/search controls record no box shadow. Use border and background contrast only where a selector-backed component above calls for it. No general modal elevation token is promoted from the captured dialog; its own rgba(0,0,0,0.1) 0px 4px 12px 0px shadow is recorded on the header menu dialog component only.

Motion & Easing

The 2026-09-29 probe read transition: color 0.1s on the header product links; the other probed controls compute transition: all 0s on the element itself. No easing curve or loading motion is promoted. Do not infer a motion scale from the dialog-open interaction or from unrelated product surfaces.

Components

Career header controls

Rest values are the July 2026-07-13 capture unless marked. Hover, pressed and keyboard focus were measured on 2026-09-29 with the fixed live state probe (logged out, keyboard walk first, nothing activated); "no change" means no computed change across the control, its ::before/::after, every descendant and 3 ancestor levels.

Filled Auth Control (로그인)

• Background: #000000
• Text: #ffffff
• Radius: 4px
• Padding: 0px
• Font: 14px / 400 / Pretendard
• Use: career-postings::[data-omd-capture="8"]; header auth control.
• Hover, pressed and keyboard focus: no change within scope (0 descendants). It has no focus indication.

White Header Control (회원가입)

• Background: #ffffff
• Text: #000000
• Radius: 6px
• Padding: 0px 12px
• Font: 14px / 400 / Pretendard
• Use: career-postings::[data-omd-capture="9"]; header control.
• Hover / pressed: a full-size ::before layer in #ffffff goes from opacity 0 to 0.1 / 0.2. It is the fill's own colour, so by compositing arithmetic nothing visible changes; this was not pixel-checked.
• Keyboard focus: an authored 2px solid #000000 outline, offset 2px.

Outline Dialog Trigger (기업 서비스)

• Background: transparent
• Text: #ffffff
• Border: 1px solid #ffffff
• Radius: 6px
• Padding: 0px 12px
• Font: 14px / 400 / Pretendard
• States: dialog-open observed after this trigger at career-postings::[data-omd-capture="10"].
• Use: Career-postings header control.
• Hover / pressed: the same ::before layer in #ffffff, opacity 0.1 / 0.2. Over the transparent button on the #000000 header it lightens the button by arithmetic (not pixel-checked).
• Keyboard focus: the same 2px solid #000000 ring, offset 2px. It is black on the black header, so its visibility is doubtful by arithmetic.

Header product link (채용공고; probe rest reading, 2026-09-29)

• Transparent, #ffffff 16px / 600 Pretendard, padding 4px 8px 0px, 60px tall. A 2px ::after bar in #ff6a0d marks the current section and never changes.
• Hover, pressed and keyboard focus: text #ffffff → #808080 (transition: color 0.1s); no outline on focus.

Header menu dialog

• Background #ffffff, text #000000, 4px radius, padding 8px 0px, 170×280px, shadow rgba(0,0,0,0.1) 0px 4px 12px 0px; 16px / 400 menu links, 170×44px, padding 0px 12px.
• Use: the dialog opened from 기업 서비스 (July interaction capture). The probe never clicks, so it was not re-opened.

Career search and filters

Search Input

• Background: #f2f2f2
• Text: #808080
• Radius: 4px
• Padding: 0px 0px 0px 56px
• Font: 16px / 400 / Pretendard
• Use: career-postings::[data-omd-capture="20"].
• Hover, pressed and keyboard focus: no change within scope (0 descendants). No focus indication.

Search submit (검색)

• Background #000000, visible label #ffffff 18px / 400 (the button itself computes #000000 14px / 400), 6px radius, padding 0px 12px, 116×52px; career-postings::[data-omd-capture="21"].
• Hover / pressed: a ::before layer in #000000, opacity 0.1 / 0.2. It is the fill's own colour, so it is invisible by compositing arithmetic (not pixel-checked).
• Keyboard focus: 2px solid #000000 outline, offset 2px.

Filter Control

• Background: transparent
• Text: #000000 visible label (the button itself computes #222222)
• Border: 1px solid #d4d4d4
• Radius: 4px
• Padding: 10px 16px
• Font: 14px / 400 / Pretendard visible label (the button itself computes 16px / 400)
• Use: career-postings::[data-omd-capture="129"] through [data-omd-capture="134"]; six controls.
• Hover, pressed and keyboard focus (measured on 직무): no change within scope (4 descendants including 1 svg and 1 path). No focus indication.

Career list

Job List Item

• Text: #222222
• Radius: 0px
• Padding: 0px
• Font: 16px / 400 / Pretendard; the posting title label is 16px / 600 #000000
• Use: career-postings::li, representative 162px-wide, 250px-high chromeless job item; no card border, fill, or shadow was captured.
• Hover, pressed and keyboard focus (on the link inside the first curated item): no change within scope (18 descendants including 1 svg, 1 path and 1 img). No focus indication.

Card icon button

• Transparent, #222222, padding 7px, 38×41px, no text node; career-postings::[data-omd-capture="89"], 100 occurrences at the top edge of the posting cards.
• Default only; not probed. The probe report treats the posting card's bookmark control as login-gated.

Corporate marketing

Footer link

• Transparent, #4c4e52 12px / 400, line height 24px.
• Hover and pressed: #999999, identical on four links in both states (July capture, corporate-home only). Keyboard focus not measured.

---

Verified: 2026-07-13

Tier 1 sources: https://career.rememberapp.co.kr/job/postings · https://corp.remember.co.kr/ · https://corp.remember.co.kr/company · https://static.rememberapp.co.kr/brand/brand_guideline_logo.pdf

Tier 2 sources: https://getdesign.md/remember (attempted; no raw entry retrieved) · https://styles.refero.design/?q=remember (attempted; no raw result retrieved)

Conflicts unresolved: none

Published component roster (32 published, none measured here)

remember-ui publishes 32 components, read from its own index at https://dramancompany.github.io/remember-ui/ on 2026-09-19. The groupings are the host's own. Every host in this group serves a shell to a plain fetch, so the names come from the rendered page in a browser. No value, state or geometry below is asserted by this reference.

• BUTTONS — BaseButton, CustomButton, LinkButton, MoreButton, NewBaseButton, TopButton
• COMMON — Chip, Container, Pagination, Spinner
• CONTROL — Accordion, BasePopover, BaseTooltip, Checkbox, InfoTooltip, PopoverItem, Radio, Select, Switch
• ICON — ProfileAvatar
• INPUT — BaseInput, DoubleInput, ImageInput, MaskingInput, Textarea
• LOGO — RememberLogo
• MODAL — BaseModal, ConfirmModal, DesignedModal, MessageModal, MobileFullModal, ProgressModal

Read from the Storybook sidebar. The seventh sidebar entry, RDS, is the documentation canvas rather than a component group, and is excluded.

States

Do's and Don'ts

Do

• Keep career lists dense, text-forward, and visually quiet.
• Use #000000 only for the observed career action contexts; retain #222222 for repeated reading text.
• Keep observed filter controls border-led with 4px corners.
• Keep corporate orange (#fc5d11) scoped to the observed corporate marketing expression.

Don't

• Treat the corporate site’s Founders display face as a source-proven shared app font.
• Invent selected-filter, error, or disabled colors from an unobserved state, or read the July mid-transition greys on the header links as hover values.
• Add shadows or card fills to chromeless career list items.
• Use a system substitute while labelling it as Pretendard.

Voice & Tone

The official identity guideline frames the persona as an experienced, friendly career expert and lists confident, positive, agile, polished, and friendly qualities. Use direct, capable language that clarifies an opportunity and its next step; avoid slang, empty urgency, or unsupported promises.

Governance

Known Gaps

• Contrast, search-input. Text #808080 on #f2f2f2 measures 3.53:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, filter-control. Text #000000 on #00000000 measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, career-card-icon-button. Text #222222 on #00000000 measures 1.32:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, corporate-footer-link. Text #4c4e52 on #00000000 measures 2.52:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.