그린카 DESIGN.md

Design System Inspiration of Greencar

Overview

Visual Theme & Atmosphere

Greencar (그린카) calls itself Korea's first commercial car-sharing service. Its own timeline starts with the founding of (주)그린포인트 in December 2009, a car-sharing server and in-car terminal in 2010, a patent filing on the car-sharing system in May 2011 and the start of "국내 최초 카셰어링 상용화 서비스" in September 2011. The company took the name 그린카 in February 2015 and, in June 2015, became a Lotte group company as a subsidiary of Lotte Rental (롯데렌탈). By December 2020 it reported about 8,000 cars at 3,200 그린존 in 147 areas, 3.5 million individual members and 10,000 corporate car-sharing accounts. It then widened past car-sharing: the at-home car-wash platform 세차클링 (September 2021), a next-generation app (May 2023) and the car-delivery app 무버스 (November 2023). In September 2024 the consumer service was renamed: "그린카 → 롯데렌터카 G car로 BI 리뉴얼". Today (주)그린카 is the company and 롯데렌터카 G car is the car-sharing brand it runs. The CI/BI page draws that hierarchy and offers the company CI, the G car, 무버스 and 세차클링 BIs and a service-brand design guideline as downloads.

The company describes itself with three principles, Connect, Communicate and Co-Create: "그린카의 이동은 물리적인 거리를 넘어 사람과 시간 그리고 공간을 연결합니다". Both of its websites carry that restraint. The corporate site (greencar.co.kr) is white and black. Section headings are 36px weight 700 in #222222, the header navigation is #171717, and actions are 8px-radius rectangles 52px tall. The rest-state fill is dark #222222. Green appears in two places. One is a full-bleed recruiting band in #00c88c with a noise texture. The other is interaction: on hover and press, both the filled and the outlined buttons fill with #00c88c. The G car product site (greencar-gcar.co.kr) uses the same header and footer templates in a more promotional register. It has 52–80px headlines, grey #f6f6f6 service cards with 20px corners, 74px service tabs that turn #222222 when selected, and red #f83333 coupon labels. Its coupon cards are the only elements that carry a shadow.

Key Characteristics:

• Dark #222222 is the rest fill of the filled action on the corporate home and of the selected service tab on G car. It is the one action colour on every captured page.
• Green #00c88c is the interaction and brand-surface colour. It fills hover and pressed buttons on the corporate home and floods its recruiting band.
• The font stack is Outfit, Pretendard, sans-serif. Latin glyphs render in Outfit and Hangul falls to Pretendard, and G car's section titles put Pretendard first.
• Headlines are large and even-leaded: 80, 64, 52 and 36px, all at a 1.5 line-height.
• Buttons are 8px-radius rectangles 52px tall. Link buttons use 12px, tabs 16px and cards 20px.
• The pages are flat. Only the G car coupon cards carry a shadow (rgba(0, 0, 0, 0.08) 0px 4px 8px). Elsewhere surfaces are separated by the #f6f6f6 fill and hairlines.

Primary tasks

• Book a shared G car for a weekend trip
• Take a one-way car for errands
• Compare the services in the mobility line-up (G car, 무버스, 세차클링)
• Look into a corporate account for a small business

Brand Narrative

The narrative comes from the company's own timeline and about pages. It began as (주)그린포인트 in 2009, launched commercial car-sharing in 2011, became 그린카 and joined Lotte Rental in 2015, and passed 3.5 million members by 2020. The about page places it inside Lotte Rental's "Mobility Full Line up": rental, maintenance and used-car sales across the group, which Greencar uses for vehicle upkeep and disposal. The product side calls itself a "라이프스타일 Mobility Platform": car-sharing (G car), contactless car delivery (무버스) and at-home washing (세차클링). The 2024 rename to 롯데렌터카 G car tied the consumer brand to its parent's rental brand. Meanwhile (주)그린카 keeps its own name, site and green CI. The two websites show the split. The corporate site uses green as the brand's surface and interaction colour. The G car site uses dark tabs, grey cards and red promotion labels.

Principles

1. Connect, Communicate, Co-Create. These are the company's three stated principles. UI implication: keep the interface about the journey and the service, not the price.
2. Dark to act, green to respond. UI implication: a rest-state action is #222222, and the green #00c88c arrives on hover and press.
3. One stack, two scripts. UI implication: Outfit for Latin, Pretendard for Hangul, even leading at 1.5.
4. Flat by default. UI implication: separate surfaces with fills and translucent hairlines, and raise only promotional coupons.

Personas

Personas are fictional archetypes informed by the service lines Greencar describes (round-trip and one-way car-sharing, corporate car-sharing). They are not real people.

김도윤, 28, 서울. Has no car of his own and books a G car round-trip for weekend trips. He expects the booking path to feel calm rather than like a rental counter.

이서연, 34, 경기. Uses one-way G car for errands. She reads the coupon labels and wants clear, low-pressure actions.

박준호, 41, 부산. A small-business owner looking at corporate car-sharing. He reads the Lotte Rental connection as reassurance.

Colors

Primary action

• Action Dark (#222222): the primary colour. It fills 채용 바로가기 on the corporate home with a white label and a matching 1px border. It is also the fill of the selected service tab on the G car round-trip page. No other colour fills a rest-state action on the three captured pages, which is why #222222 is the primary.
• On Primary (#ffffff): labels on the dark fill.

Brand accent

• Greencar Green (#00c88c): the brand colour in its rendered roles. It is the hover and pressed fill of both the dark and the outlined buttons on the corporate home, with the label switching to #222222. It is also the fill of the full-bleed recruiting band. It never appears at rest on an action, and it does not render on either captured G car page. So it is the accent, not the primary.

Text

• Ink (#000000): document default on the corporate home and the header wordmark.
• Ink Soft (#171717): header navigation and G car headlines.
• Heading Dark (#222222): section headings on the corporate home. This is the same value as the action fill.
• Warm Grey (#3e3a39): summaries on the G car home.
• Body Grey (#434343): guide text in the G car round-trip tabs.
• Muted (#5e5e5e): card descriptions and tips on G car.
• Faint (#b4b4b4): low-emphasis footer controls.

Surface and signal

• White (#ffffff): canvas, link buttons and coupon cards.
• Surface Grey (#f6f6f6): G car service cards.
• Hairline (#dddddd): coupon-card border. Card and tab borders elsewhere are translucent rgba(0, 0, 0, 0.08).
• Promo Red (#f83333): coupon and promotion labels on the G car round-trip page. It is a signal colour, not an action colour.

Typography

Font Family

• Stack: Outfit, Pretendard, sans-serif is the computed family on the body of all three pages. Outfit is a Latin typeface, so Korean text in any Outfit-first element renders in Pretendard. The two faces divide the work by script, not by role.
• Pretendard first: on the G car round-trip page the section titles, tabs, badges and card descriptions declare Pretendard first.
• Delivery: both families load from greencar.co.kr (/fonts/outfit/Outfit-*.woff2), with 224 observed uses of Outfit and 95 of Pretendard. Both are distributed under the SIL Open Font License 1.1.

Hierarchy

Principles

• Even leading: every headline and reading size sits at a 1.5 line-height. Only navigation (1.2) and button labels (1.4) are tighter.
• Weight carries hierarchy: 800 and 700 for headlines, 600 for sub-heads and badges, 500 for navigation and leads, 400 for reading.
• No tracking: every captured element computes letter-spacing: normal.

Layout

Spacing observed

• Buttons: 14px 20px. Link buttons: 13px 17px. Badges: 4px 12px.
• Service cards: 40px 24px. Coupon cards: 18px. Tabs: 18px.

Grid and container

• Captured at 1440 × 900. Corporate headings and the G car tab strip span 1400px, which leaves a 20px side margin. The service cards on G car sit three across at 400px.

Border radius scale

• 8px buttons and badges, 10px coupon cards, 12px link buttons, 16px tabs, 20px service cards.

Responsive Behavior

Only the 1440 × 900 desktop viewport was captured. Breakpoints, touch targets and collapse behaviour were not measured and are not declared here. The buttons are 52px tall and the service tabs 74px on desktop.

Elevation & Depth

Almost nothing is raised. The coupon cards on the G car round-trip page carry rgba(0, 0, 0, 0.08) 0px 4px 8px 0px, and every other captured element computes box-shadow: none. Depth comes from fills instead: the green band, the grey #f6f6f6 cards, and translucent rgba(0, 0, 0, 0.08) borders on cards, tabs and link buttons.

Motion & Easing

The probe read two transitions on the corporate home. The filled button's longest transition is 800ms. The outline button declares transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) 0s. When keyboard focus scrolled 채용 바로가기 into view, its section head's transform went from translateY(100px) to 0 and stayed there after blur. That is a reveal animation, not a control state. No other duration or easing was measured, and none is declared.

Components

Buttons

• Filled (button-fill): #222222 fill, white label, 1px #222222 border, 8px radius, 14px 20px padding, 52px tall, 16px/700. On hover and press it turns #00c88c with a #222222 label and a green border. Used for 채용 바로가기.
• Outline (button-line): transparent, #222222 label and 1px border, same geometry. On hover and press it fills #00c88c and the border turns green. Used for 더 많은 뉴스 보기.
• Outline on image (button-line-invert): transparent with a white label and 1px white border, 324 × 52. Used for 더 알아보기 on the three service slides.
• Link button (link-button, G car): white, #000000 label, 1px rgba(0, 0, 0, 0.08) border, 12px radius, 13px 17px, 50px tall, 16px/400, with an out-link icon.

Tabs and navigation

• Service tab (service-tab, G car): white, #222222 label, translucent 1px border, 16px radius, 18px padding, 74px tall, 24px/500 Pretendard. Selected: #222222 fill with a white label.
• Header navigation (nav-item, corporate): 18px/500 #171717 labels.

Cards and badges

• Brand panel (brand-panel): full-bleed #00c88c band, 1440 × 640, with a repeating noise texture. It holds the recruiting message and the dark 채용 바로가기 button.
• Service card (service-card, G car): #f6f6f6, translucent 1px border, 20px radius, 40px 24px, 400 × 431.
• Coupon card (coupon-card, G car): white, 1px #dddddd, 10px radius, 18px padding, shadow rgba(0, 0, 0, 0.08) 0px 4px 8px 0px, 220 × 136.
• Coupon badge (coupon-badge, G car): #f83333, white 16px/600 label, 8px radius, 4px 12px, 32px tall.

Verified: 2026-09-30 (deterministic collector capture of the public, logged-out corporate home and two G car pages, a fixed keyboard-probe state read on the corporate home, and first-party company pages) Tier 1 sources: https://www.greencar.co.kr/ ; https://www.greencar-gcar.co.kr/ ; https://www.greencar-gcar.co.kr/sharing/gcar ; https://www.greencar.co.kr/greencar/history ; https://www.greencar.co.kr/greencar/about ; https://www.greencar.co.kr/greencar/ci Tier 2 sources: getdesign.md and styles.refero.design were not re-queried in this pass; no Tier 2 value used

States

Only states read from the capture and the probe are listed.

Empty, loading, error and success states were not observed and are not declared.

Live state probe, 2026-10-16 (https://www.greencar.co.kr/), button-fill: focus — bg #00c88c, label #222222, border #00c88c, browser default focus ring (outline auto) (+1 nested-layer changes).

Do's and Don'ts

Do

• Fill the primary action in #222222 with a white label, and use an 8px radius and a 52px height.
• Use #00c88c for the hover and pressed fill and for full-bleed brand bands.
• Set Korean text in Pretendard and Latin text in Outfit, with the stack Outfit, Pretendard, sans-serif.
• Keep headlines at a 1.5 line-height and weight 600–800.
• Use #f83333 only for coupon and promotion labels.

Don't

• Don't fill a rest-state action in green. The captured pages never do.
• Don't add shadows to buttons or service cards. Only coupon cards are raised.
• Don't track Korean headlines. Every captured element is at normal.
• Don't use pill radii on actions. The largest radius on an action is 12px.

Voice & Tone

Greencar speaks about mobility as connection and daily life rather than rental transactions. The corporate copy is mission-framed and calm. The G car copy is promotional but plain.

The June record's English hero tagline "Create a Better Life" is not on the current corporate home and is no longer quoted.

Agent Prompt Guide

Quick colour reference

• Primary action: #222222 (white label)
• Hover / pressed and brand band: #00c88c
• Text: #000000, #171717, #222222, #434343, #5e5e5e
• Surface: #ffffff, #f6f6f6; hairline #dddddd
• Promotion: #f83333

Example component prompts

• "A 52px-tall button with an 8px radius, #222222 fill and a white 16px/700 label. On hover it fills #00c88c and the label turns #222222."
• "A full-bleed #00c88c band with a 36px/700 headline in #222222 and a dark 채용 바로가기 button."
• "Three 400 × 431 service cards in #f6f6f6, 20px radius, 40px 24px padding and a 1px rgba(0, 0, 0, 0.08) border."
• "A service tab strip of 74px white tabs with 16px corners. The selected tab is #222222 with a white 24px/500 Pretendard label."

Iteration guide

• If an action looks green at rest, move green to the hover state.
• If a card has a shadow, remove it unless the card is a coupon.
• If Korean text renders in a Latin face, check that Pretendard is second in the stack.

Governance

Known Gaps

• Contrast, button-line. 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, coupon-badge. Text #ffffff on #f83333 measures 3.81:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.