Design System Inspiration of Barogo

1. Visual Theme & Atmosphere

Barogo (바로고) is one of Korea's largest last-mile delivery-dispatch platforms — the logistics rails beneath thousands of restaurants and stores — and its website carries the confident, high-energy plainness of an operator that moves physical goods for a living. The canvas is pure white (#ffffff) with occasional cool-grey resting surfaces (#f6f6f6, #f9f9f9), and text is set in true black (#000000) softening to a near-black (#111111) — no navy, no warm greys, just a direct high-contrast read that mirrors the brand's "무엇이든 어디서나" (anything, anywhere) matter-of-factness. The single saturated brand color is a hot delivery orange (#fa5014), applied with discipline: it owns the primary call-to-action, the outline-button ink, and little else, so the eye is trained to read orange as "act now — get moving."

The typographic voice is Korean-utilitarian rather than editorial. A single family, Pretendard, carries essentially the entire site (measured across 434–474 nodes per page) — bold weight 700 for every headline from the 42px homepage hero up to the 54px mission line on the company page, and a quiet weight 400 at 16px for body and UI. There is almost no typographic ornament; the only exception is Termina, a geometric Latin display face reserved for oversized numerals such as the ghosted 2016 founding-year marker (150px, black at 5% alpha) on the about page. Hierarchy is driven by size and weight, not by color or decoration.

What gives Barogo its particular flavor is its near-flat, sharp-cornered geometry. Buttons round at a barely-there ~3px (measured 3.008px) — crisp, almost square, reading as functional and fast rather than soft. Cards step up to 12px and 16px, and larger rounded surfaces reach 20px, but elevation stays restrained: a light rgba(0,0,0,0.1) 0px 2px 20px card shadow and a slightly firmer rgba(0,0,0,0.2) 0px 2px 10px under the primary CTA. Structure is communicated by tint (#f6f6f6), hairlines (#dcdcdc), and the black footer (#1a1a1a) rather than by heavy stacked cards. An electric blue (#2d3ce6) appears once, inside the "BAROGO Brand Identity" block, as a deliberate secondary-brand accent — never as general UI color.

Key Characteristics:

• Single saturated delivery orange (#fa5014) reserved for the primary CTA and outline-button ink — the site's one "action" color
• Pretendard everywhere: weight 700 for all headlines (42px hero, 54px mission), weight 400 at 16px for body/UI
• Termina used only for oversized Latin/numeral display accents (the ghosted 150px 2016)
• True black (#000000) and near-black (#111111) text on white — direct, high-contrast, no navy
• Sharp ~3px button corners — crisp and functional, not pill-soft; cards at 12px/16px, rounded surfaces at 20px
• Restrained elevation: light rgba(0,0,0,0.1) card shadow, firmer rgba(0,0,0,0.2) CTA shadow
• Cool-grey resting surfaces (#f6f6f6, #f9f9f9) and #dcdcdc hairlines carry structure over heavy cards
• Black footer (#1a1a1a) with white (#ffffff) links; electric blue (#2d3ce6) as a single brand-identity accent

2. Color Palette & Roles

Primary

• Barogo Orange (#fa5014): The brand's single saturated color and primary CTA background (rgb(250,80,20)). Also the ink and border color of outline buttons. The site's exclusive "action" hue.

Text & Ink

• Ink Black (#000000): Primary heading and body text color — true black for maximum directness.
• Ink Soft (#111111): A near-black used on secondary headings and dense text; a marginally softer companion to pure black.
• Body Grey (#666666): Secondary body copy and descriptions on content-heavy pages.
• Muted Grey (#999999): Tertiary text, captions, and metadata.

Neutral & Surface

• Pure White (#ffffff): Page background, card surfaces, text on orange/dark. Also the on-primary text color.
• Surface Grey (#f6f6f6): Cool-grey resting surface for segmented content blocks.
• Surface Alt (#f9f9f9): A slightly lighter secondary grey surface for alternating bands on the company page.
• Hairline (#dcdcdc): Thin borders, dividers, and card outlines — a primary separation device in this near-flat system.
• Dark (#1a1a1a): Near-black footer background (rendered alongside pure #000000), carrying white links.

Accent

• Brand-Identity Blue (#2d3ce6): An electric blue used only inside the "BAROGO Brand Identity" block on the about page as a deliberate secondary-brand accent — never general UI chrome.

3. Typography Rules

Font Family

• Body / UI / Headlines: Pretendard — the document default, carrying essentially the entire site (measured across 434–474 nodes per page). Weight 700 for display, weight 400–500 for text and nav.
• Display Accent: Termina (termina, sans-serif) — a geometric Latin face reserved for oversized numeral/Latin display accents (e.g. the ghosted 150px 2016 founding-year marker). Never used for hangul body text.

Hierarchy

Principles

• One family, size-and-weight hierarchy: Pretendard does nearly all the work; hierarchy comes from size (16px → 42px → 54px) and weight (400 → 700), not from mixing typefaces or colors.
• Bold display, light body: every headline is weight 700; body and UI sit at weight 400. The weight jump is the primary emphasis signal.
• Termina as numeral ornament only: the geometric Latin face appears solely on oversized numerals and Latin wordmarks (the ghosted 2016), never on functional hangul text.
• High-contrast black text: text is #000000/#111111 on white — direct and legible, not the softened navy common to fintech peers.

4. Component Stylings

Buttons

Primary CTA

• Background: #fa5014
• Text: #ffffff
• Radius: 3px
• Padding: 0px 40px
• Height: 72px
• Font: 20px / 700 / Pretendard
• Shadow: rgba(0,0,0,0.2) 0px 2px 10px
• Use: Primary call-to-action — "바로 문의하기" (the site's single primary action)

Outline / Secondary

• Background: transparent
• Text: #fa5014
• Border: 1px solid #fa5014
• Radius: 3px
• Padding: 0px 30px
• Height: 64px
• Font: 18px / 700 / Pretendard
• Use: Secondary actions — "스토어프로그램", "사용 설명서", "자세히 보기", "BI / GUIDE"

Cards & Containers

Feature Card

• Background: #ffffff
• Radius: 12px
• Padding: 20px
• Shadow: rgba(0,0,0,0.1) 0px 2px 20px
• Use: Feature/info card grid on the about page (also rendered in #fa5014, #000000, #2d3ce6, and #dcdcdc fills)

Stat Card

• Background: #ffffff
• Radius: 16px
• Padding: 40px 32px
• Shadow: rgba(0,0,0,0.1) 0px 2px 20px
• Use: "숫자로 보는 바로고" (Barogo by the numbers) statistic cards

Badges

• Background: #f6f6f6
• Text: #666666
• Radius: 20px
• Font: 12px / 500 / Pretendard
• Use: Small rounded category/status pills reusing the 20px surface radius

Navigation

• Background: #ffffff
• Text: #000000
• Font: 20px / 500 / Pretendard
• Active: weight 700, #000000
• Use: Top horizontal nav ("배달대행 문의", "라이더 지원", "허브 창업", "회사 소개", "채용")

Footer

• Background: #1a1a1a
• Links: #ffffff
• Font: 12px / 500 / Pretendard
• Use: Footer navigation on the near-black dark band

---

Verified: 2026-07-02 (omd:add-reference CREATE — Tier 1 live inspect, 2 surfaces) Tier 1 sources: https://www.barogo.com/, https://www.barogo.com/aboutUs Tier 2 sources: getdesign.md/barogo (0 files — "No designs found"); styles.refero.design/?q=barogo (no barogo-specific match — generic browse grid only) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base rhythm: ~8px, scaling 8 / 12 / 16 / 20 / 30 / 40 / 50
• Notable: buttons pad horizontally at 30px (outline) and 40px (primary CTA); cards pad at 20px, stat cards at 40px 32px; footer band pads 50px vertically

Grid & Container

• Centered single-column hero anchored by the 42px Pretendard headline and the orange primary CTA
• Feature/info cards arranged in multi-column grids (12px radius), grouping services and store-program entry points
• Alternating full-width bands: white (#ffffff) content over cool-grey (#f6f6f6 / #f9f9f9) resting sections
• About page adds oversized ghost numerals (Termina) as background typographic texture behind stat blocks

Whitespace Philosophy

• Operational clarity over decoration: generous vertical rhythm between sections keeps a logistics-dense product feeling calm and scannable.
• Flat segmentation: sections separate by background tint (#f6f6f6 vs #ffffff) and #dcdcdc hairlines rather than by heavy elevation.
• Sharp, functional geometry: the ~3px button corner keeps interactive chrome reading as fast and utilitarian.

Border Radius Scale

• Small (3px): buttons — sharp, functional
• Medium (12px): feature/info cards
• Large (16px): stat cards
• X-Large (20px): rounded surfaces and pill-style chips
• Full (9999px): fully rounded elements when used

6. Depth & Elevation

Shadow Philosophy: Barogo is a near-flat system. Most of the page carries box-shadow: none; depth is communicated through flat tinted surfaces (#f6f6f6, #f9f9f9) and #dcdcdc hairlines. When elevation is used it is light and diffuse — a soft rgba(0,0,0,0.1) 0px 2px 20px lift on cards, and a slightly firmer, tighter rgba(0,0,0,0.2) 0px 2px 10px under the primary CTA so the single action button reads as pressable. This restraint keeps the logistics UI feeling fast and modern rather than heavy — emphasis comes from the orange (#fa5014) and the sharp geometry, not from stacked drop shadows.

7. Do's and Don'ts

Do

• Reserve Barogo orange (#fa5014) for the primary CTA and outline-button ink — keep it the single "action" color
• Set every headline in Pretendard weight 700; use weight 400 at 16px for body and UI
• Use true black (#000000) / near-black (#111111) for text on white — direct and high-contrast
• Keep button corners sharp at ~3px; step cards up to 12px/16px and rounded surfaces to 20px
• Separate sections with flat tint (#f6f6f6 / #f9f9f9) and #dcdcdc hairlines, not heavy shadows
• Keep elevation light — rgba(0,0,0,0.1) 0px 2px 20px on cards, firmer rgba(0,0,0,0.2) only on the CTA
• Use the black footer (#1a1a1a) with white (#ffffff) links for the closing band
• Reserve Termina and the electric blue (#2d3ce6) for display numerals and the brand-identity block respectively

Don't

• Spread orange across many elements — it dilutes the single-action signal
• Set headlines in a light weight — display is always Pretendard 700
• Use navy or soft grey for primary text — Barogo text is true black on white
• Round buttons into full pills — the ~3px sharp corner is the functional read
• Lean on heavy stacked drop shadows for structure — use tint and hairlines instead
• Use Termina for hangul body text — it is a Latin/numeral display accent only
• Promote the electric blue (#2d3ce6) into general UI color — it belongs to the brand-identity block
• Mix in a second saturated accent alongside orange in product chrome

8. Responsive Behavior

Breakpoints

Touch Targets

• Primary CTA at 72px height with 40px horizontal padding — an unmistakable, comfortably tappable target
• Outline buttons at 64px height with 30px horizontal padding
• Nav links padded 10px vertically within the top header for touch spacing

Collapsing Strategy

• Hero: 42px (home) / 54px (about) headline scales down on mobile, weight 700 maintained
• Feature/stat card grids: multi-column → 2-up → single stacked column
• Alternating white / tinted bands maintain full-width treatment; internal padding reduces
• Oversized Termina ghost numerals scale down or clip gracefully as background texture

Image Behavior

• App screenshots and illustrations sit on flat surfaces with light or no shadow, consistent with the near-flat system
• Cards maintain their 12px/16px radius across breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA / action: Barogo Orange (#fa5014)
• Heading / body text: Ink Black (#000000), Ink Soft (#111111)
• Secondary text: Body Grey (#666666)
• Muted text: Muted Grey (#999999)
• Background: Pure White (#ffffff)
• Resting surface: Surface Grey (#f6f6f6), Surface Alt (#f9f9f9)
• Hairline: #dcdcdc
• Footer / dark: #1a1a1a
• Brand-identity accent: Electric Blue (#2d3ce6)
• On-orange / on-dark text: White (#ffffff)

Example Component Prompts

• "Create a hero on white background. Headline at 42px Pretendard weight 700, color #000000. One orange primary CTA: #fa5014 background, white text, 3px radius, 0 40px padding, 72px height, 20px/700 Pretendard, shadow rgba(0,0,0,0.2) 0px 2px 10px — '바로 문의하기'. Beside it an outline button: transparent, #fa5014 text, 1px solid #fa5014, 3px radius, 0 30px padding, 64px height, 18px/700."
• "Design a feature card: white #ffffff background, 12px radius, 20px padding, shadow rgba(0,0,0,0.1) 0px 2px 20px. Title in Pretendard weight 700 #000000, body 16px weight 400 #666666."
• "Build a stat card row ('숫자로 보는 바로고'): white cards, 16px radius, 40px 32px padding, light rgba(0,0,0,0.1) shadow. Place an oversized ghost numeral behind in Termina at 150px, #000000 at 0.05 alpha."
• "Create a top nav: white header, Pretendard 20px weight 500 links in #000000, weight 700 for the active item. Sections separate with #f6f6f6 tint and #dcdcdc hairlines. Close with a #1a1a1a footer carrying 12px/500 white links."

Iteration Guide

1. Orange (#fa5014) is the single action color — do not spread it
2. Pretendard 700 for every headline; Pretendard 400 at 16px for body
3. Sharp ~3px button corners; cards at 12px/16px; rounded surfaces at 20px
4. Text is true black #000000 / #111111 on white — never navy
5. Structure with #f6f6f6/#f9f9f9 tint and #dcdcdc hairlines, not heavy shadows
6. Keep elevation light — rgba(0,0,0,0.1) cards, firmer rgba(0,0,0,0.2) only on the CTA
7. Termina and electric blue (#2d3ce6) stay confined to display numerals and the brand-identity block

---

10. Voice & Tone

Barogo's voice is direct, operational, and can-do — the register of a logistics partner that measures itself by whether the delivery arrives. The tagline "무엇이든 어디서나" ("anything, anywhere") and the hero "무엇이든 어디서나 배달" set the tone: plain, capability-first Korean, no hype. Copy addresses two audiences at once — merchants ("사장님", the store owners) and riders — and stays practical and reassuring for both, framing Barogo as the infrastructure that lets a small business focus on its craft ("사장님의 정성 그대로" / "just as the owner made it").

Voice samples (verbatim from live surfaces):

• "무엇이든 어디서나" — brand tagline / homepage title (capability-first). (verified live 2026-07-02)
• "세상에 활력을 더하는 초연결 생태계를 만듭니다." — aboutUs mission headline (mission-framed). (verified live 2026-07-02)
• "성공하는 매장의 노하우" — homepage section heading (merchant-supportive). (verified live 2026-07-02)

Forbidden register: hype superlatives, fear-based urgency, jargon that hides the operational reality, exclamation-heavy sales copy. Barogo speaks like an operator, not a marketer.

11. Brand Narrative

Barogo (바로고) was founded in 2016 (the founding year is rendered as an oversized ghost numeral on the company page) as a last-mile delivery-dispatch platform addressing a structural gap in Korea's food-and-retail economy: individual stores had no reliable, technology-driven way to get orders to customers, and the delivery-agency market was fragmented and manual. Barogo's premise — captured in the mission line "세상에 활력을 더하는 초연결 생태계를 만듭니다" ("we build a hyper-connected ecosystem that adds vitality to the world") — was to become the shared logistics rails connecting merchants, riders, and delivery demand.

The product grew into one of Korea's largest delivery-dispatch networks, coordinating riders and store operators through software (the Barogo Store Manager program, rider apps, and hub-franchise operations visible in the site's "스토어프로그램", "라이더 지원", and "허브 창업" entry points). The "숫자로 보는 바로고" (Barogo by the numbers) section frames the company's scale in concrete figures rather than adjectives — an operator's instinct to let the metrics carry the claim.

What Barogo's design refuses is the decorative softness of consumer-lifestyle branding: there is no navy-and-pastel gentleness, no heavy card-stacking, no pill-rounded playfulness. What it embraces is an operator's aesthetic — one hot orange for action, true-black high-contrast text, a single workhorse typeface (Pretendard), sharp functional corners, and a flat, fast surface. The design says what the business does: move things, reliably, anywhere.

12. Principles

1. Anything, anywhere — reliably. The brand promise is universal reach with operational dependability. UI implication: keep the primary action ("바로 문의하기") always obvious in orange; never bury the path to getting started.
2. One action, one color. Orange (#fa5014) means "do this." UI implication: reserve the saturated orange for the primary CTA and outline ink so the next step is never ambiguous.
3. Operator, not marketer. Copy and layout favor plain capability over hype. UI implication: lead with concrete figures ("숫자로 보는 바로고") and direct labels; avoid superlatives and decorative flourish.
4. Fast and flat. A logistics product should feel quick and unfussy. UI implication: near-shadowless surfaces, tint-and-hairline separation, sharp ~3px corners — nothing that reads as slow or heavy.
5. Respect the store owner. The merchant ("사장님") is the customer whose craft Barogo protects. UI implication: merchant-facing copy stays supportive ("사장님의 정성 그대로"); tools present as approachable, not gatekeeping.

13. Personas

Personas below are fictional archetypes informed by publicly observable Barogo user segments (Korean store owners using delivery dispatch, delivery riders, hub franchise operators), not individual people.

김상현, 41, 대구. A fried-chicken store owner who signed up for Barogo's Store Manager program to stop juggling multiple ad-hoc delivery riders. Values that a single dashboard routes orders and that support is a direct "문의하기" away. Chose Barogo because the pitch was operational and concrete, not a lifestyle promise.

이도윤, 28, 서울. A delivery rider who works through Barogo's rider app. Cares about steady dispatch volume and clear earnings, and found the "라이더 지원" onboarding path plain and fast. Distrusts platforms that over-design; trusts one that looks like it just works.

박지은, 47, 경기. A prospective hub-franchise operator evaluating "허브 창업". Reads the "숫자로 보는 바로고" figures to gauge the network's scale before committing. Wants transparent numbers and a no-nonsense interface over glossy marketing.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and steady — matching the fast, flat aesthetic of a logistics operator. The homepage hero carousel advances with a motion-standard / ease-enter slide (the "Previous slide" / "Next slide" controls); buttons respond to press with a subtle opacity/scale shift. No bounce or spring — a delivery-infrastructure product signals reliability, not playfulness. Under prefers-reduced-motion: reduce, carousel auto-advance pauses and all transitions collapse to instant; the site remains fully functional.