Greenvines DESIGN.md

Design System Inspiration of Greenvines

Overview

Visual Theme & Atmosphere

Greenvines (綠藤生機) is Taiwan's flagship clean-beauty brand, and its site reads like a botanical manifesto typeset by a luxury magazine. The canvas is pure white (#ffffff), but the system's soul is a deep forest-green ink (#002d18) that does triple duty as body text, button borders, and the footer's immersive dark panel — the brand literally writes in the color of leaves. Large photographic sections sit on a muted sage surface (#9caba3), the single most frequent background on the homepage, supported by a pale grey-green (#e6eae8). The one deliberate disruption is a burnt orange (#c84600) reserved for commerce moments: add-to-cart, promotional deep-dives, and offer links. Green is the voice; orange is the ask.

Typography is the most radical statement. Display headlines run in a custom "gv" webfont (falling back to Noto Sans TC) at weight 100 — an ultra-thin, almost calligraphic stroke — at enormous sizes: 104px for page titles like 品牌故事, 52px for section heads, with positive 2px letter-spacing that lets the thin strokes breathe. Where most e-commerce shouts in bold, Greenvines whispers in hairlines, and the effect is unmistakably premium and serene — the typographic equivalent of the brand's 減法 (subtraction) skincare philosophy: remove everything unnecessary, including font weight.

Geometry is equally disciplined. Every button, input, and card is a sharp 0px-radius rectangle; the only curve in the system is the perfect circle of the floating chat button. Outline CTAs use a confident 2px solid #002d18 border with 1px letter-spaced 14px labels and an arrow suffix (深入了解 →). There are no drop shadows anywhere — separation comes from photography, tinted sage bands, and the dark green footer. The whole system feels like an apothecary label: precise, honest, quietly botanical.

Key Characteristics:

• Deep forest-green ink (#002d18) as text color, border color, and footer background — the brand color is literally the reading color
• Ultra-thin weight-100 display type at 104px/52px with positive 2px tracking — subtraction as typography
• Single burnt-orange accent (#c84600) reserved exclusively for commerce CTAs
• Sharp 0px radius on every rectangle; the chat FAB circle is the only rounded element
• Shadowless: separation via sage tints (#9caba3, #e6eae8) and full-bleed photography
• 2px solid outline buttons with arrow suffixes (→ / 〉) as the default CTA grammar
• Custom "gv" webfont over Noto Sans TC for Traditional Chinese display
• Dark green footer (#002d18) with grey column headings (#9b9b9b) and white links

Primary tasks

• Add a skincare product to the cart from its page
• Read which ingredients the brand refuses to use
• Browse every product by name in the full-screen menu
• Find out where the subtraction philosophy came from
• Return empty bottles through the recycling programme

Brand Narrative

Greenvines (綠藤生機) was founded in 2010 in Taipei by three National Taiwan University finance graduates — 鄭涵睿 (Harris Cheng), 廖怡雯 (Patricia Liao), and 許偉哲 (Wei-Che Hsu) — who left careers in banking and asset management and pooled NT$5 million to start the company. The scientific soul of the brand is 林碧霞博士 (Dr. Lin Bi-Hsia), the agricultural scientist (and mother of co-founder 鄭涵睿) whose 20+ years of plant-cell research the brand-story page credits directly: 「承襲自林碧霞博士的啟發」. The company began with living broccoli sprouts (活芽菜) before growing into Taiwan's defining clean-beauty house, and in 2015 became one of Taiwan's first certified B Corporations — repeatedly honored among B Lab's "Best for the World." As of the 2024 永續報告書, 廖怡雯 serves as CEO, and the company donates 1% for the Planet (over NT$10 million cumulatively) while running a closed-loop 空瓶回收計畫 bottle-recycling program.

The founding question, preserved verbatim on the brand-story page, is disarmingly simple: 「如果肌膚只需要水和油，為什麼我們不單純替肌膚補水補油？」 ("If skin only needs water and oil, why don't we simply give it water and oil?"). From that came 減法保養 (subtraction skincare): strip every routine and formula down to what skin actually needs, and maintain a public 非必要成分清單 of 3,200+ unnecessary or questionable ingredients the brand refuses to use — codified in its FAITH formulation principles. The brand is explicit that it does not blindly worship "natural": 「我們並不盲目信仰天然，而是從天然之中找尋與安全的交集」.

What Greenvines refuses: shadow-heavy, discount-screaming beauty e-commerce; bold-faced hype typography; and the industry habit of selling more steps. What it embraces: ink-green text on white, hairline-thin headlines, photography of real plants and real bottles, and a sustainability report published like a product. The design system is the philosophy — every removed border-radius, shadow, and font-weight is subtraction made visible.

Principles

1. Subtraction is the product. 減法保養 governs formulas, routines, and pixels alike. UI implication: one idea per section, one CTA per band; remove decoration before adding it — no shadows, no rounding, no second accent.
2. Transparency builds trust. The 3200+ 非必要成分清單 and 配方架構 透明解析 make exclusion lists public. UI implication: surface ingredient data, sources, and numbers plainly; never hide claims behind marketing gloss.
3. Teach before selling. The blog, calculators of skin knowledge, and 深入了解 CTAs put understanding first. UI implication: default CTA is an outline "learn more," not a filled "buy now"; commerce orange appears only at the cart.
4. Sustainability is an action, not a badge. B Corp certification, 空瓶回收計畫, 1% for the Planet. UI implication: report real numbers (letters collected, bottles recycled) with the same typographic dignity as product claims.
5. Quiet confidence over volume. Weight-100 headlines and a 45-day unconditional return policy say the same thing: we don't need to shout. UI implication: whisper-thin display type, generous whitespace, no urgency patterns.

Personas

Personas below are fictional archetypes informed by publicly observable Greenvines customer segments (Taiwanese clean-beauty consumers, sustainability-minded shoppers), not individual people.

林佳穎, 31, 台北. A marketing manager with sensitized skin from years of 10-step routines. Found Greenvines through the 無乳液實驗 articles and was converted by the idea of doing less. Reads the 非必要成分清單 before trying any new brand, and trusts the 45-day return policy enough to experiment.

陳威廷, 38, 新竹. An engineer who buys the 頭皮淨化蜂膠+ 洗髮精 on subscription and returns empty bottles through 空瓶回收計畫. Chose the brand for its B Corp certification — he wants his household spending to match his values, and Greenvines is the only beauty brand whose sustainability report he has actually opened.

張雅婷, 26, 台中. A graduate student who discovered the brand at the 台中漢神洲際 store. Loves the calm, apothecary-like retail space and the poetic product names (入夢 θ 呼吸精萃). Follows the blog for evidence-based skincare and mindfulness content rather than influencer reviews.

Colors

Primary

• Forest Ink (#002d18): The brand color. Body text, headings, outline-button borders and labels, footer background, chat FAB. A near-black green that reads as ink on paper.
• Pure White (#ffffff): Page canvas, text on dark/sage/orange surfaces, footer links.
• Burnt Orange (#c84600): The single warm accent — add-to-cart buttons, emphasis 深入了解 CTAs, promotional offer links. Strictly a commerce/action color. (A brighter #e67600 appears rarely on promotional ribbons.)

Sage Surfaces

• Sage (#9caba3): The signature tinted surface — large homepage section bands and photographic content blocks. The most frequent background color measured on the live homepage.
• Pale Sage (#e6eae8): Light grey-green secondary surface for quieter bands; also the tint base of the translucent newsletter input fill.
• Sage Button (#ced5d1): Muted sage fill for the newsletter submit button on the dark footer.

Greens & Greys

• Soft Green (#3b5647): Secondary green for icons, supporting text, and product-page tab links (擁抱需要 / 減去非必要).
• Ink Alt (#0a2d1b): Near-identical dark green used on quantity-stepper glyphs.
• Stepper Grey (#f1f1f1): Light grey fill of the +/− quantity steppers beside add-to-cart.
• Footer Heading Grey (#9b9b9b): Footer column headings (深入了解, 客戶服務, 訂閱電子報).
• Footer Muted (#aaaaaa): Footer fine print and legal text on the dark panel.
• Helper Grey (#666464): Customer-service helper paragraphs and low-emphasis notes.

Typography

Font Family

• Display & UI: gv (custom webfont), fallback "Noto Sans TC", 微軟正黑體, serif — carries every headline, nav item, button label, and footer link.
• Base: "Helvetica Neue", Helvetica, Arial, sans-serif on the document body for Latin fallback text.
• (Third-party promo ribbons injected by the marketing layer use Insider-Poppins at 12px/600 — an embed, not a brand font.)

Hierarchy

Principles

• Weight 100 is the brand voice: every display headline is ultra-thin. Bolder weights (400–600) are reserved for small functional UI (buttons, add-to-cart).
• Positive tracking, not negative: 2px letter-spacing at display sizes and 1px on button labels — thin strokes are given air, the opposite of the tight-tracked Western SaaS convention.
• Hanzi-first scale: the system is tuned for Traditional Chinese — generous line-heights (1.4–1.6 body) and large display sizes keep dense hanzi legible and elegant.
• Two jobs, one family: the gv/Noto Sans TC stack covers both whisper-thin display and functional UI; hierarchy is created by weight and size, never by switching typefaces.

Layout

Spacing System

• Button padding: 12px 20px — the recurring interactive unit
• Mega-menu links carry 50px right padding; product story tabs use 15px horizontal padding
• Section bands are tall and full-bleed, with display headlines given generous 64px+ line boxes

Grid & Container

• Full-width photographic bands alternate with white editorial blocks — the page is a vertical rhythm of image, manifesto, image
• Homepage: hero photography → 52px thin headline → outline CTA, repeated as a cadence
• Product pages: long-form narrative sections (配方架構 透明解析, reviews) with a persistent 80px add-to-cart bar
• Footer is a four-column directory (深入了解 / 客戶服務 / 關注我們 / 訂閱電子報) on the dark green panel

Whitespace Philosophy

• Subtraction as layout: consistent with 減法保養, sections hold one idea each — a headline, a paragraph, one CTA. No sidebars, no widget clutter.
• Photography is the container: instead of cards-with-borders, content sits directly on full-bleed imagery or sage tints.
• Flat segmentation: bands of #ffffff, #9caba3, #e6eae8, and #002d18 create the page's entire depth structure.

Border Radius Scale

• 0px: every button, input, card, and band — the system is rigorously sharp-cornered
• 50% / 9999px: the floating chat button only

Responsive Behavior

Breakpoints

Touch Targets

• Outline CTAs at 48px height with 12px 20px padding — comfortably tappable
• Add-to-cart bar at 80px height with full-width steppers — thumb-zone commerce
• Newsletter fields at 55px height on the footer panel

Collapsing Strategy

• Display headlines scale down but keep weight 100 and positive tracking
• Full-bleed photography crops rather than stacks — imagery stays immersive
• The persistent add-to-cart bar docks to the bottom on product pages
• Footer columns stack vertically on the dark panel

Image Behavior

• Photography is full-bleed at every size, with white weight-100 titles overlaid
• No image carries shadow or rounded corners at any breakpoint

Elevation & Depth

Shadow Philosophy: Greenvines is a fully shadowless system. Live inspection found no box-shadows on any measured element — buttons, the add-to-cart bar, photo cards, and the sticky chrome are all flat. Depth is communicated by color temperature instead: white canvas → sage tint → deep forest green, a progression that mirrors walking from daylight into foliage. Combined with the 0px radius discipline, the result feels printed rather than layered — closer to high-end packaging design than to app UI, which is precisely the brand's territory.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.none: none

Motion & Easing

Durations:

Easings:

Motion rules: Motion is slow, soft, and botanical — closer to a breath than a bounce. Outline CTAs transition border/fill on hover at motion-fast; the full-screen #002d18 mega menu fades in at motion-slow; photography crossfades rather than slides. No spring, overshoot, or parallax gimmicks — a brand built on subtraction does not add kinetic noise. Under prefers-reduced-motion: reduce, all transitions collapse to instant and crossfades become cuts; the store remains fully functional.

Components

Buttons

Outline CTA (Default)

• Background: transparent
• Text: #002d18
• Border: 2px solid #002d18
• Radius: 0px
• Padding: 12px 20px
• Font: 14px / 400 / gv, letter-spacing 1px
• Use: The system's default CTA — 深入了解 →, 閱讀文章 →, 純淨保養組合 →, 非必要成分清單 →

Accent Fill CTA

• Background: #c84600
• Text: #ffffff
• Border: 2px solid #c84600
• Radius: 0px
• Padding: 12px 20px
• Font: 14px / 400 / gv, letter-spacing 1px
• Use: Emphasis variant of the same geometry — sustainability 深入了解 blocks, 88-折 offer links

Add-to-Cart

• Background: #c84600
• Text: #ffffff
• Radius: 0px
• Padding: 12px 20px
• Font: 15–20px / 600 / gv, letter-spacing 1px
• Use: 加入購物車 on product pages — 80px tall commerce bar, the heaviest weight in the system

Quantity Stepper

• Background: #f1f1f1
• Text: #0a2d1b
• Radius: 0px
• Font: 20px / 400
• Use: +/− steppers flanking the add-to-cart bar, same 80px height

Newsletter Submit

• Background: #ced5d1
• Text: #002d18
• Radius: 0px
• Font: 16px / 400
• Use: 訂閱電子報 submit on the dark footer panel, 50px tall

Chat FAB

• Background: #002d18
• Radius: 50%
• Use: Floating 58px circular customer-chat button — the only rounded element in the system

Inputs & Forms

Newsletter Field

• Background: rgba(229,229,229,0.2) — translucent pale tint over the #002d18 footer
• Text: #ffffff
• Border: none
• Radius: 0px
• Font: 14px / 400
• Use: Name and email fields (placeholder 希望綠藤怎麼稱呼您 / 您的電子郵件地址), 55px tall

Cards & Containers

Sage Section Band

• Background: #9caba3
• Text: #002d18
• Radius: 0px
• Use: Large tinted content bands segmenting the homepage; photography sits directly on the tint

Pale Surface Band

• Background: #e6eae8
• Text: #002d18
• Radius: 0px
• Use: Quieter alternating section surface

Photo Overlay Card

• Background: full-bleed photography
• Text: #ffffff
• Font: 28px / 100 / gv titles
• Use: Story cards — 減法保養「荷包蛋保養法」, 綠藤生機空瓶回收計畫

Navigation

Mega Menu

• Background: #002d18 full-screen overlay
• Text: #ffffff
• Font: 16px / 300 / gv for product links; 17px / 400 for section heads (更多綠藤, 加入綠藤)
• Use: Full-screen dark-green menu listing every product by name

Footer

• Background: #002d18
• Column headings: #9b9b9b, 15px / 100, line-height 36px
• Links: #ffffff, 15px (品牌故事, 純淨保養主張, 3200+ 非必要成份清單, 永續報告書)
• Fine print: #aaaaaa

---

Verified: 2026-06-10 Tier 1 sources: https://www.greenvines.com.tw (homepage, live computed-style inspect), https://www.greenvines.com.tw/products/know-more-luminosity-serum (product surface, live inspect), https://www.greenvines.com.tw/pages/about-us (brand-story surface, live inspect), https://blog.greenvines.com.tw (official Greenvines blog 純淨生活提案部落格 — brand-owned) Tier 2 sources: none available (getdesign.md/greenvines → 404 "No designs found"; styles.refero.design searched "greenvines" and "綠藤" — brand not listed) Conflicts unresolved: none

States

Do's and Don'ts

Do

• Set display headlines in weight 100 at 45–104px with +2px letter-spacing — thinness is the brand voice
• Use #002d18 forest ink for text, borders, and dark panels — green is the reading color, not a decoration
• Reserve #c84600 burnt orange strictly for commerce actions (add-to-cart, offers)
• Keep every rectangle at 0px radius; allow circles only for the chat FAB
• Use 2px solid #002d18 outline buttons with arrow suffixes (→) as the default CTA
• Separate sections with sage tints (#9caba3, #e6eae8) and full-bleed photography
• Write CTAs as invitations to learn (深入了解, 閱讀文章) rather than commands to buy
• Use the dark #002d18 panel for footer and menu — immersive, ink-like brand moments

Don't

• Use bold display headlines — weight 600+ belongs only to the add-to-cart label
• Apply border-radius to buttons, inputs, or cards — the system is sharp-cornered
• Add drop shadows — flat tints and photography carry all depth
• Spread the orange accent into navigation or editorial content — it is a commerce signal only
• Use negative letter-spacing — thin hanzi strokes need air, always track positive
• Introduce additional accent hues — the palette is green, sage, white, and one orange
• Crowd sections with multiple CTAs — one idea, one button, per band
• Replace the photographic surfaces with illustration or gradients — real botanicals are the brand texture

Voice & Tone

Greenvines speaks in the voice of a calm, knowledgeable, subtraction-minded botanist — confident enough to tell customers to use less. The register is editorial and philosophical rather than promotional: the site's own title is a thesis, 「沒有減法，何來精華」 ("without subtraction, whence essence?"). Copy consistently teaches before it sells, decodes ingredient science into plain Traditional Chinese, and frames purchases as choices within a larger sustainable life.

Voice samples (verbatim from brand surfaces):

• 「沒有減法，何來精華」 — site title tagline. (verified live 2026-06-10, document.title)
• 「現在，保養從減法開始 #二減一加」 — homepage section headline. (verified live 2026-06-10)
• 「超過兩萬則真實好評，23 款純淨保養洗沐產品」 — homepage social-proof headline. (verified live 2026-06-10)
• "More is Less. 多，即是少。" — brand-story page headline. (verified live 2026-06-10, /pages/about-us)
• 「讓肌膚熟悉的，應該純淨」 — product-page section headline. (verified live 2026-06-10)
• "The more we know, the less we need." — clean-beauty beliefs page. (fetched 2026-06-10, /pages/clean-beliefs)

Forbidden register: miracle-cure promises, fear-based ingredient scaremongering without evidence, urgency pressure (countdown timers, 限時搶購 hysteria), beauty-standard shaming, and undefined chemistry jargon left unexplained.

Agent Prompt Guide

Quick Color Reference

• Text / borders / dark panels: Forest Ink (#002d18)
• Background: Pure White (#ffffff)
• Tinted section: Sage (#9caba3), Pale Sage (#e6eae8)
• Commerce CTA: Burnt Orange (#c84600), white text
• Secondary green: Soft Green (#3b5647)
• Newsletter submit: Sage Button (#ced5d1) with #002d18 text
• Footer headings: #9b9b9b; footer fine print: #aaaaaa; helper text: #666464
• Stepper fill: #f1f1f1 with #0a2d1b glyphs

Example Component Prompts

• "Create a hero band: full-bleed botanical photograph. Overlay headline at 52px, font-weight 100, letter-spacing 2px, color #ffffff. Below, an outline button: transparent background, 2px solid #ffffff border, 0px radius, 12px 20px padding, 14px/400 label with 1px letter-spacing and a → suffix."
• "Design an editorial section on white: headline 52px weight 100 letter-spacing 2px color #002d18; paragraph 20px/400 line-height 1.6 color #002d18; one outline CTA with 2px solid #002d18 border, 0px radius, 深入了解 → label."
• "Build a product add-to-cart bar: 80px tall, background #c84600, white 20px/600 label 加入購物車, letter-spacing 1px, 0px radius. Flank with #f1f1f1 quantity steppers, #0a2d1b glyphs, same height."
• "Create a footer: background #002d18. Column headings 15px weight 100 color #9b9b9b (深入了解, 客戶服務, 訂閱電子報). Links 15px #ffffff. Newsletter input 55px tall, translucent light fill, white text, 0px radius; submit button #ced5d1 with #002d18 text, 50px tall."
• "Design a sage band: background #9caba3, headline 52px weight 100 #002d18, one accent button #c84600 background, white text, 2px solid #c84600 border, 0px radius."

Iteration Guide

1. Weight 100 + positive 2px tracking on every display headline — never bold, never tight
2. 0px radius on all rectangles; only the chat FAB is circular
3. #002d18 is simultaneously text color, border color, and dark surface — keep that triple role
4. Orange #c84600 appears only when money changes hands
5. No shadows — use #9caba3/#e6eae8 tints and photography for depth
6. CTAs are outline-first; filled buttons are the exception, not the rule
7. Line-height stays generous (1.4–1.6) for Traditional Chinese body text
8. The dark green panel (footer/menu) is the brand's immersive moment — white text, grey headings

---