Design System Inspiration of Greencar

1. Visual Theme & Atmosphere

Greencar (그린카) is Korea's pioneer car-sharing service — now a Lotte Rental brand — and its official site reads like a calm, editorial corporate-mobility surface rather than a transactional booking app. The canvas is pure white (#ffffff) broken by full-bleed bands of the signature brand green (#00c88c and the brighter #00dc9a), which carry the identity rather than decorate it. Body and heading text sit in pure black (#000000) and a softer dark chrome ink (#222222), giving the page a confident, grounded weight. The green is treated as the brand's "who we are" color — it floods hero panels and tints accent links — while the actual buttons are deliberately neutral, so the eye reads green as identity and dark as action.

The typographic personality pairs two fonts with two jobs. Latin display runs in Outfit — a geometric, rounded-terminal sans that gives the English hero tagline "Create a Better Life" an open, optimistic feel at 64px / weight 500 in a deep teal-navy (#133b55). Korean headlines and body run in Pretendard, the de-facto Korean product font, optimized for dense hangul legibility at 16px / weight 400. Section headlines step up to 36px / weight 700 in the dark ink (#222222), and the wordmark H1 그린카 sits at 32px / 700. The split — Outfit for the aspirational latin voice, Pretendard for the functional Korean reading layer — is the core tension of the system.

What distinguishes Greencar from heavier automotive and rental sites is its restraint with depth. The system is nearly flat: a single soft card shadow (rgba(0,0,0,0.08) 0px 4px 8px) lifts white news cards, and almost everything else separates through flat color bands and thin #dddddd hairlines on a light #f6f6f6 surface. Interactive chrome leans on the 8px-radius rectangle — solid dark buttons (#222222) and matching outline buttons (transparent with a 1px dark or white border), all at 52px height with 14px 20px padding. Cards round more generously at 12-20px. The neutral text ladder steps from black through #303030, #5e5e5e, the muted nav grey #777777, down to a faint #b4b4b4. The result is a clean, modern, mobility-forward aesthetic: green where it signals the brand, dark where it asks for a tap, and quiet everywhere else.

Key Characteristics:

• Signature brand green (#00c88c) as identity — floods hero panels and tints accent links, not buttons
• Brighter green (#00dc9a) for full-bleed hero bands
• Outfit (latin display) + Pretendard (hangul body) — two fonts, two jobs
• Dark ink (#222222) and pure black (#000000) as the action + text colors
• Deep teal-navy (#133b55) for the English hero tagline "Create a Better Life"
• 8px-radius rectangular buttons; 12-20px radius cards — no pills on actions
• Near-flat depth: one soft rgba(0,0,0,0.08) 0px 4px 8px card shadow + #dddddd hairlines
• Cool neutral ladder (#303030 → #5e5e5e → #777777 → #b4b4b4) on #f6f6f6 surface

2. Color Palette & Roles

Primary

• Greencar Green (#00c88c): The signature brand color. Fills hero/brand panels and tints accent links — the system's identity color, used to say "this is Greencar" rather than "do this."
• Bright Green (#00dc9a): A more saturated companion green used for full-bleed hero bands and large brand surfaces.

Ink & Action

• Chrome Ink (#222222): The dark action color. Solid CTA backgrounds, outline-button borders, and section-headline text.
• Pure Black (#000000): Primary body and heading text, and text placed on green panels.
• Active Ink (#171717): Near-black used for active/selected nav items.
• Teal Navy (#133b55): A deep blue-teal reserved for the English hero tagline ("Create a Better Life").

Text Hierarchy

• Body (#303030): Secondary body copy and descriptions.
• Muted (#5e5e5e): Tertiary text, captions, metadata.
• Nav Muted (#777777): Inactive top-nav link color.
• Faint (#b4b4b4): Disabled text, lowest-emphasis labels.

Neutral & Surface

• Pure White (#ffffff): Page background, white card surfaces, text on green/dark.
• Surface Grey (#f6f6f6): Light grey tinted surface for alternating sections and tool blocks.
• Hairline (#dddddd): Thin borders, card outlines, and dividers — the primary separation device in this near-flat system.

3. Typography Rules

Font Family

• Display (latin): Outfit — geometric rounded sans for the latin/English voice (hero tagline, wordmark, nav). Falls back through Pretendard, sans-serif.
• Body (hangul): Pretendard — the document default for Korean headlines and body copy at weight 400.

Hierarchy

Principles

• Two fonts, two jobs: Outfit carries the aspirational latin voice (hero, wordmark, nav); Pretendard carries the functional Korean reading layer. They never swap roles.
• Heavy section heads, light body: Section headlines run weight 700 at 36px; body drops to weight 400 at 16px. The weight contrast is the primary hierarchy signal.
• Consistent 1.5 line-height: Hero, section, body, and nav all sit at a 1.5 line ratio — generous and even, which keeps dense hangul readable.
• Teal for the tagline only: The deep teal-navy (#133b55) is reserved for the English hero tagline; everything else is black or chrome ink.

4. Component Stylings

Buttons

Solid Dark (Primary)

• Background: #222222
• Text: #ffffff
• Radius: 8px
• Padding: 14px 20px
• Height: 52px
• Font: 16px Outfit weight 700
• Use: Primary action CTA ("채용 바로가기")

Outline Dark (Secondary)

• Background: transparent
• Text: #222222
• Border: 1px solid #222222
• Radius: 8px
• Padding: 14px 20px
• Height: 52px
• Font: 16px weight 700
• Use: Secondary CTA on light backgrounds ("더 많은 뉴스 보기")

Outline Invert (On Green/Dark)

• Background: transparent
• Text: #ffffff
• Border: 1px solid #ffffff
• Radius: 8px
• Padding: 14px 20px
• Height: 52px
• Font: 16px weight 700
• Use: Outline CTA over green/dark hero panels ("더 알아보기")

Cards & Containers

News / Line-up Card

• Background: #ffffff
• Border: 1px solid #dddddd
• Radius: 12px
• Padding: 8px
• Shadow: rgba(0,0,0,0.08) 0px 4px 8px
• Use: News items and mobility line-up cards on the homepage

Green Brand Panel

• Background: #00c88c
• Text: #000000
• Use: Full-bleed green brand/hero band (also #00dc9a brighter variant)

Badges

Green Accent Link

• Text: #00c88c
• Font: 16px weight 700
• Use: Green accent / footer policy links ("개인정보 처리방침", "위치기반 서비스 이용약관")

Navigation

• Background: #ffffff
• Text: #777777 (inactive)
• Active: #171717
• Font: 18px Outfit weight 600
• Use: Top horizontal nav ("회사소개", "서비스", "인재채용")

---

Verified: 2026-06-26 (omd:add-reference CREATE — Tier 1 live inspect, 2 surfaces) Tier 1 sources: https://www.greencar.co.kr, https://www.greencar-gcar.co.kr Tier 2 sources: getdesign.md/greencar — not listed (KR brand); styles.refero.design/?q=greencar — not listed Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: 4px
• Scale: 4px, 8px, 12px, 16px, 20px, 32px, 48px
• Notable: Buttons use 14px 20px padding for a comfortable 52px hit area; cards pad tight at 8px around media

Grid & Container

• Centered single-column hero anchored by the 64px Outfit "Create a Better Life" tagline
• Full-bleed green (#00c88c / #00dc9a) brand bands alternate with white content sections
• News and mobility line-up arranged as a row of 12px-radius white cards with hairline borders
• Light grey (#f6f6f6) tinted bands segment secondary content

Whitespace Philosophy

• Brand bands over decoration: large color separates content into zones — the green is the section device, not an icon or illustration
• Flat segmentation: sections separate by background color and #dddddd hairlines, not heavy elevation
• Generous vertical rhythm: airy spacing between corporate sections keeps the page calm and editorial

Border Radius Scale

• Small (6px): inner controls
• Medium (8px): buttons — the action workhorse
• Base (12px): cards
• Large (16-20px): larger cards and media containers
• Full (9999px): occasional circular avatars/marks

6. Depth & Elevation

Shadow Philosophy: Greencar is a near-flat system. Live inspection found a single soft card shadow (rgba(0,0,0,0.08) 0px 4px 8px) on white news cards and box-shadow: none across hero bands, nav, and headings. Depth and grouping are communicated through flat color bands (green #00c88c / grey #f6f6f6) and thin #dddddd hairlines rather than stacked elevation. When emphasis is needed the system reaches for color (the green band) or the dark ink (#222222), not a heavier shadow.

7. Do's and Don'ts

Do

• Use the brand green (#00c88c) as an identity color — hero panels and accent links, not buttons
• Use the dark ink (#222222) as the action color for solid and outline CTAs
• Pair Outfit (latin display) with Pretendard (hangul body) — keep their roles separate
• Use the deep teal-navy (#133b55) for the English hero tagline
• Keep buttons rectangular at 8px radius, 52px height, 14px 20px padding
• Separate sections with flat color bands and #dddddd hairlines, not heavy shadows
• Use the single soft card shadow (rgba(0,0,0,0.08) 0px 4px 8px) for white cards only
• Use pure black (#000000) for body and heading text

Don't

• Spread the green across buttons and small controls — it dilutes the identity signal
• Use pill shapes on action buttons — Greencar buttons are 8px rectangles
• Add heavy or layered drop shadows — the system is near-flat
• Mix in a second saturated accent hue — green is the only brand color
• Set Korean display copy in Outfit or latin copy in Pretendard — keep the two fonts in their lanes
• Use the teal-navy (#133b55) for body text — it is reserved for the hero tagline
• Replace hairline #dddddd separators with thick borders or color blocks

8. Responsive Behavior

Breakpoints

Touch Targets

• Buttons at 52px height with 14px 20px padding — comfortably tappable
• Nav items at 18px with generous vertical padding
• Cards sized for full-width tap on mobile

Collapsing Strategy

• Hero: 64px Outfit tagline scales down on mobile; weight 500 maintained
• Card rows: multi-column → 2-up → stacked single column
• Green brand bands maintain full-width treatment, reduce internal padding
• Top nav collapses to a hamburger toggle within the dark chrome header

Image Behavior

• News/line-up card media maintains 12px radius across breakpoints
• Hero brand-band imagery scales full-bleed; the green fill persists at all sizes
• Cards keep the soft rgba(0,0,0,0.08) shadow on all viewports

9. Agent Prompt Guide

Quick Color Reference

• Brand identity / hero panel: Greencar Green (#00c88c), bright #00dc9a
• Action (buttons): Chrome Ink (#222222)
• Heading / body text: Pure Black (#000000)
• Active nav: #171717
• Hero tagline: Teal Navy (#133b55)
• Secondary text: Body (#303030), Muted (#5e5e5e)
• Inactive nav: #777777
• Faint / disabled: #b4b4b4
• Surface: #f6f6f6
• Hairline: #dddddd
• Background: Pure White (#ffffff)

Example Component Prompts

• "Create a hero on white. English tagline 'Create a Better Life' at 64px Outfit weight 500, line-height 1.5, color #133b55. Below it a full-bleed green band (#00c88c) with black (#000000) text and a white-outline CTA: transparent bg, 1px solid #ffffff border, 8px radius, 14px 20px padding, 16px weight 700 — '더 알아보기'."
• "Design a news card: white #ffffff background, 1px solid #dddddd border, 12px radius, 8px padding, shadow rgba(0,0,0,0.08) 0px 4px 8px. Title 36px Outfit weight 700, #222222. Body 16px Pretendard weight 400, #303030."
• "Build a primary CTA: solid #222222 background, white #ffffff text, 8px radius, 14px 20px padding, 52px height, 16px weight 700 — '채용 바로가기'. Secondary variant: transparent bg, #222222 text, 1px solid #222222 border, same geometry."
• "Create top nav: white header. Outfit 18px weight 600 links, #777777 inactive, #171717 active. Green accent (#00c88c) for footer policy links at 16px weight 700."

Iteration Guide

1. Green (#00c88c) is identity, dark ink (#222222) is action — never swap their roles
2. Outfit for latin, Pretendard for hangul — keep the lanes separate
3. Buttons are 8px rectangles at 52px height — no pills
4. One soft card shadow only; everything else is flat with #dddddd hairlines
5. Teal-navy (#133b55) is the hero tagline color, nothing else
6. Text is pure black (#000000); step down through #303030 / #5e5e5e / #777777 / #b4b4b4
7. Use grey #f6f6f6 bands and green #00c88c bands to segment, not shadows

---

10. Voice & Tone

Greencar's voice is warm, forward-looking, and human-centered — a mobility brand that frames car-sharing as a way to expand life, not just rent a car. The English hero tagline "Create a Better Life" sets the aspirational register, while the Korean copy keeps it grounded and inclusive ("더 나은 모빌리티 경험을 함께 만들어 갈 여러분"). Copy treats mobility as a shared, human experience — connecting people, time, and space — rather than a transaction.

Voice samples (verbatim from live homepage):

• "Create a Better Life" — hero tagline, Outfit 64px (aspirational brand statement). (verified live 2026-06-26)
• "그린카는 고객 중심의 모빌리티 풀 라인업을 열어갑니다." — section heading (customer-centered mobility). (verified live 2026-06-26)
• "더 나은 모빌리티 경험을 함께 만들어 갈 여러분을 기다립니다." — recruit section (invitational). (verified live 2026-06-26)
• "이동을 넘어 사람과 공간을 연결하는 그린카." — meta description (connective brand promise). (verified live 2026-06-26)

Forbidden register: aggressive sales urgency, discount-driven hard sell, undefined jargon, exclamation-heavy hype. Greencar speaks about mobility as a human experience, calmly and confidently.

11. Brand Narrative

Greencar (그린카) is one of Korea's pioneering car-sharing services, established in 2011 as the country began adopting on-demand short-term vehicle rental. In 2015 it became a subsidiary of Lotte Rental (롯데렌탈), Korea's largest car-rental group, and today positions itself — in its own words on the homepage — as a "프리미엄 카셰어링 서비스" operated "롯데렌탈과 함께" (together with Lotte Rental). The brand's stated promise is to go "이동을 넘어 사람과 공간을 연결하는" — beyond movement, connecting people and space — designing "사용자 중심의 새로운 이동 경험" (a user-centered new mobility experience).

The product matured from round-trip car-sharing into a full mobility line-up: G car (round-trip and one-way car-sharing, G car zone, G car Pass, G car M, G car Biz), Movus, and Clingwash car-care. The corporate brand frames this expansion as "고객 중심의 모빌리티 풀 라인업" — a customer-centered, full mobility line-up — rather than a fleet catalog.

What Greencar refuses, visible in its design: the heavy, discount-driven chrome of legacy rental sites (no aggressive deal banners, no cluttered price tables on the brand surface) and the cold institutional palette of automotive incumbents. What it embraces: a calm editorial corporate surface, a single confident brand green, the aspirational latin voice of Outfit over the functional Korean clarity of Pretendard, and a near-flat layout that lets the green identity and the human copy carry the page.

12. Principles

1. Green is identity, dark is action. UI implication: reserve the brand green (#00c88c) for hero panels and accent links; keep buttons in neutral dark ink (#222222) so the next step is unambiguous.
2. Mobility as a human experience. Greencar frames car-sharing as connecting people and space. UI implication: lead with aspirational, inclusive copy; avoid transactional, price-first layouts on the brand surface.
3. Two fonts, two voices. UI implication: Outfit carries the aspirational latin voice; Pretendard carries the functional Korean reading layer — never blur the two.
4. Flat and calm. UI implication: separate with color bands and hairlines, not stacked shadows; keep the page editorial and quick to scan.
5. One brand color. UI implication: green is the only saturated hue — don't introduce a competing accent that would dilute the identity signal.

13. Personas

Personas below are fictional archetypes informed by publicly observable Greencar user segments (Korean urban car-sharing users, weekend renters, corporate mobility customers), not individual people.

김도윤, 28, 서울. A city dweller without his own car who books a G car round-trip for weekend trips. Values that the brand feels modern and human rather than like a transactional rental counter. Chose Greencar partly because it is backed by Lotte Rental and feels trustworthy.

이서연, 34, 경기. A working parent who uses one-way G car and G car zone for errands and commuting. Appreciates the calm, uncluttered interface and clear CTAs that don't pressure her with deal banners.

박준호, 41, 부산. A small-business owner exploring G car Biz for corporate mobility. Wants a brand that signals reliability and scale; reads the "프리미엄 카셰어링" and Lotte Rental backing as reassurance.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and quiet — consistent with the calm, near-flat aesthetic. Cards and sections fade-in from below at motion-standard / ease-enter; buttons respond to press with a subtle opacity/scale shift. No bounce or spring — a mobility brand backed by a large rental group signals steadiness, not playfulness. Under prefers-reduced-motion: reduce, all transitions collapse to instant; the product remains fully functional.