Design System Inspiration of Portaly

1. Visual Theme & Atmosphere

Portaly (傳送門) is Taiwan's largest Traditional-Chinese link-in-bio and creator landing-page builder, operated by Real Engine, and its marketing surface reads like a bright, optimistic creator-economy product rather than a utilitarian dev tool. The page background is a soft off-white (#f8f8f8) under crisp white (#ffffff) content cards, with body copy in a comfortable warm grey-black (#333333) and headlines in true black (#000000). The single most saturated interactive color is a confident magenta-plum (#862983) — it owns every filled "Join Now" / "Start Free" call-to-action and the billing toggle — so the eye is trained to read that one plum as "the action."

The brand's emotional signature, though, is its teal-and-magenta duality wired into a curved-arrow logo. The Portaly wordmark sits in navy (#0c2340) with a teal-to-magenta swoosh curving through the letters — the curved-arrow visual metaphor that recurs across the system as a left-to-right gradient (#bb53b9 → #00a6a3, magenta into teal) on stat strips and decorative accents. Teal (#00a6a3, with #12a3a0 and #38aaaa companions) is the accent voice: feature checkmarks, the "200,000 creators" highlight, and icon details. The hero itself is washed in a separate purple gradient (#6e28af → #ac8ffe) with white headline and a white outline pill CTA, giving the top of the page a playful, energetic lift before the content settles into clean white.

Geometrically the system is friendly and rounded but not extreme: filled pricing buttons sit at a tidy 6px radius, large CTAs relax to 20px, plan cards round to 12px with a soft grey ambient shadow (rgba(99,99,99,0.2) 0px 2px 8px), and the hero/nav pills go fully round (9999px). Depth is gentle — a single soft card shadow and thin #d9d9d9 hairlines do the separating, never heavy elevation. Typography is set in Noto Sans with a Noto Sans TC fallback, so the same chrome renders Traditional Chinese natively on creator pages (e.g. 林啟維, Portaly 徵才 全端工程師). Headlines run heavy — 50px ExtraBold (800) on the hero, 36px Bold (700) on sections — over quiet 16px / weight 400 body, the classic bold-display-over-light-body tension.

Key Characteristics:

• Magenta-plum (#862983) reserved for the primary interactive action — filled CTAs and the billing toggle thumb
• Teal accent voice (#00a6a3 / #12a3a0 / #38aaaa) — logo swoosh, feature checkmarks, highlights
• Signature magenta→teal gradient (#bb53b9 → #00a6a3) and a playful purple hero gradient (#6e28af → #ac8ffe)
• Navy (#0c2340, deeper #1a2a3a) for nav links and structural ink instead of pure black
• Noto Sans + Noto Sans TC stack — bold display (800/700) over quiet 16px/400 body, Traditional-Chinese native
• Rounded-but-restrained geometry — 6px buttons, 12px cards, 20px large CTAs, 9999px hero/nav pills
• Gentle depth — one soft grey card shadow (rgba(99,99,99,0.2) 0px 2px 8px) + #d9d9d9 hairlines
• Off-white canvas (#f8f8f8) under white surfaces; warm-grey body text (#333333)

2. Color Palette & Roles

Primary & Brand

• Portaly Plum (#862983): Primary interactive color. Filled CTA background ("Join Now", "Start Free"), billing toggle active thumb, secondary-button outline/text. The system's single "action" color.
• Brand Teal (#00a6a3): The dominant accent — logo swoosh endpoint, the magenta→teal gradient, highlight numerals ("200,000"), icon details. Appears 60+ times in the live color scan.
• Teal Alt (#12a3a0): Slightly deeper teal used for feature checkmarks and secondary accent strokes.
• Teal Soft (#38aaaa): A muted teal companion for softer accent surfaces and hover tints.

Gradients

• Swoosh Magenta (#bb53b9): The magenta start of the signature left-to-right brand gradient #bb53b9 → #00a6a3 (the curved-arrow swoosh / stat-strip accent).
• Purple Hero (#6e28af): Top stop of the hero background gradient.
• Purple Hero Light (#ac8ffe): Bottom stop of the hero gradient #6e28af → #ac8ffe — gives the hero its playful violet wash.

Ink & Structure

• Ink Navy (#0c2340): Nav links, structural headings, strong labels — a deep blue-black instead of pure black.
• Navy Deep (#1a2a3a): A darker navy used on deeper structural surfaces and dark creator-page backdrops.
• Ink (#333333): Default body text — a warm grey-black, the document default.
• Pure Black (#000000): Maximum-contrast marketing headlines (hero feature statements, section heads).

Neutral & Surface

• Canvas (#f8f8f8): Page background — soft off-white under white content.
• Surface (#ffffff): White content cards, plan cards, button surfaces, text on plum/teal.
• Surface Alt (#f2f2f2): Secondary grey surface for alternating blocks and chips.
• Hairline (#d9d9d9): Thin borders, dividers, plan-grid separators, and the billing-toggle track.
• Muted (#969696): Helper/fine-print text ("Permanently Free to Use", annual-fee notes).
• On Primary (#ffffff): Text/icon color on plum and teal fills.

3. Typography Rules

Font Family

• Sans: Noto Sans — the primary Latin face for all display and body text.
• CJK: Noto Sans TC — Traditional-Chinese fallback in the same stack ("Noto Sans", "Noto Sans TC", sans-serif); creator product pages also append Noto Color Emoji.

Hierarchy

Principles

• Bold display, quiet body: headlines run 800 (hero) and 700 (sections/features); body and lede stay at 400. The weight jump is the primary hierarchy signal.
• Two-language, one stack: the same Noto Sans → Noto Sans TC stack renders Latin marketing copy and Traditional-Chinese creator pages without a font swap — Noto's matched metrics keep hangul-free CJK and Latin visually consistent.
• Near-flat tracking: only the hero carries a slight positive 1px letter-spacing for its ExtraBold display line; everything else sits at normal tracking.
• Generous line-height: body and most heads run at a comfortable 1.5 line-height, reinforcing the airy, approachable creator-economy feel.

4. Component Stylings

Buttons

Primary (Join Now)

• Background: #862983
• Text: #ffffff
• Radius: 6px
• Padding: 4px 16px
• Height: 32px
• Font: 16px Noto Sans weight 600
• Use: Primary CTA on pricing/nav — the system's single filled action

Primary Large (Start Free)

• Background: #862983
• Text: #ffffff
• Radius: 20px
• Padding: 24px 40px
• Height: 52px
• Font: 18px Noto Sans weight 600
• Use: Large primary CTA in plan cards / section ends

Secondary (Start for Free)

• Background: #ffffff
• Text: #862983
• Border: 1px solid #862983
• Radius: 6px
• Padding: 4px 16px
• Height: 32px
• Font: 16px Noto Sans weight 600
• Use: Lower-emphasis plum-outline action (Free plan)

Hero Ghost (Start for free)

• Text: #ffffff
• Border: 2px solid #ffffff
• Radius: 9999px
• Padding: 14px 70px
• Font: 28px Noto Sans weight 600
• Use: White outline pill CTA over the purple hero gradient

Cards & Containers

Pricing Plan Card

• Background: #ffffff
• Radius: 12px
• Shadow: rgba(99,99,99,0.2) 0px 2px 8px 0px
• Use: Pricing plan card sitting on the #f8f8f8 canvas (no border)

Creator Link Block

• Background: #ffffff
• Radius: 6px
• Padding: 8px 16px
• Font: 16px Noto Sans weight 600
• Shadow: rgba(0,0,0,0.05) 0px 1px 2px 0px
• Use: The core product component — a full-width tappable link row on a creator's page (filled 6px and rounded 16px variants; accent color is creator-chosen)

Badges

Feature Check

• Text: #12a3a0
• Font: 16px Noto Sans weight 400
• Use: Teal checkmark glyph preceding each plan feature line

Toggles

Billing Switch (Annual / Monthly)

• Background: #d9d9d9
• Radius: 9999px
• Height: 24px
• Use: Billing-period switch; the active thumb is plum #862983

Navigation

• Background: #ffffff
• Text: #0c2340
• Font: 18px Noto Sans weight 600
• Active: magenta #862983 text on the active item
• Use: Top horizontal nav (Features, Pricing, Portaly AI, Blog) with a plum "Join Now" pill right-aligned

---

Verified: 2026-06-17 (omd:add-reference CREATE — Tier 1 live inspect, 3 brand-owned surfaces) Tier 1 sources: https://portaly.cc/ ; https://portaly.cc/en/pricing ; https://portaly.cc/en/blog ; https://portaly.cc/cwl (founder live creator page — Traditional-Chinese product surface) Tier 2 sources: getdesign.md/portaly — NO DATA ("No designs found for 'portaly'"); styles.refero.design/?q=portaly — Portaly not indexed (only generic default cards returned) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: ~4px
• Scale: 4px, 8px, 12px, 16px, 20px, 24px, 40px, 64px
• Notable: section CTAs use a generous 24px 40px padding for the large "Start Free" button; plan cards sit ~540px wide in a two-up grid

Grid & Container

• Centered marketing column: full-width purple hero gradient band, then white content sections on the #f8f8f8 canvas
• Pricing: a centered two-up plan-card grid (Free / Premium), each card ~538px wide at 12px radius
• Feature sections alternate white feature-card rows with template-thumbnail gradient grids
• Creator pages: a single mobile-first centered column of full-width link blocks under an avatar + handle header

Whitespace Philosophy

• Airy and optimistic: generous vertical rhythm between sections; the creator-economy product avoids dense dashboard packing on its marketing surface.
• Color band cadence: the purple hero gradient gives way to clean white content, a bright-to-calm transition that anchors the brand mood up top.
• Soft segmentation: sections separate by #f8f8f8 vs #ffffff background shift and thin #d9d9d9 hairlines, not heavy borders.

Border Radius Scale

• Small (6px): pricing buttons, filled creator link blocks — the workhorse
• Medium (12px): pricing plan cards, content containers
• Large (16px–20px): rounded creator link blocks, large CTAs
• Full (9999px): hero/nav pills, billing toggle, "Join Now" header pill

6. Depth & Elevation

Shadow Philosophy: Portaly keeps elevation gentle and friendly. The signature card shadow is a soft, neutral grey ambient blur (rgba(99,99,99,0.2) 0px 2px 8px) — low spread, no harsh contrast — used on pricing plan cards. Creator link blocks carry an even lighter rgba(0,0,0,0.05) 0px 1px 2px lift. Most of the marketing surface is flat; depth is reserved for the few surfaces that genuinely need to read as "tappable cards." The mood is approachable, not engineered — the opposite of a heavy fintech card-stack.

7. Do's and Don'ts

Do

• Reserve magenta-plum (#862983) for the primary action — filled CTAs and the billing toggle
• Use teal (#00a6a3 / #12a3a0) as the accent voice — checkmarks, highlights, the logo swoosh
• Reach for the magenta→teal gradient (#bb53b9 → #00a6a3) for the signature curved-arrow / stat accents
• Use the purple hero gradient (#6e28af → #ac8ffe) with white headline + white outline pill at the top
• Set type in Noto Sans with a Noto Sans TC fallback so Traditional Chinese renders natively
• Run headlines heavy (800 hero / 700 sections) over quiet 16px / weight 400 body
• Keep buttons at 6px, cards at 12px, large CTAs at 20px, hero/nav pills fully round
• Use navy (#0c2340) for nav links and structural ink instead of pure black

Don't

• Spread plum across many elements — it dilutes the single-action signal
• Swap the accent away from teal — the teal-magenta duality is the brand's identity
• Use heavy or dark drop shadows — depth is a soft grey ambient lift only
• Set the whole UI in pure black headings everywhere — reserve #000000 for marketing display lines
• Use sharp square corners on buttons or cards — everything is gently rounded
• Render Traditional Chinese without the Noto Sans TC fallback — the stack must carry CJK
• Add a third saturated brand hue — plum + teal (+ the playful purple hero) is the whole palette
• Set headlines in a light weight — display is always Bold/ExtraBold

8. Responsive Behavior

Breakpoints

Touch Targets

• Filled CTAs at 32px+ height with comfortable horizontal padding; large CTA at 52px
• Creator link blocks at 44px+ full-width rows — generous, unmistakable tap targets
• Nav links spaced for touch within the white header

Collapsing Strategy

• Hero: 50px ExtraBold headline scales down on mobile, weight 800 maintained
• Pricing: two-up plan cards → stacked single column
• Feature sections + template grids: multi-column → stacked
• Purple hero band maintains its gradient full-width across breakpoints

Image Behavior

• Template thumbnails keep their vibrant gradient fills and rounded corners at all sizes
• Phone-mockup product shots in the hero scale proportionally
• Creator-page avatars and link blocks remain full-width centered on narrow viewports

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: Portaly Plum (#862983)
• Brand accent: Teal (#00a6a3), deeper Teal Alt (#12a3a0)
• Hero gradient: Purple (#6e28af → #ac8ffe)
• Signature gradient: Magenta → Teal (#bb53b9 → #00a6a3)
• Nav / ink: Navy (#0c2340)
• Body text: Ink (#333333); headings Pure Black (#000000)
• Muted text: (#969696)
• Canvas: Off-white (#f8f8f8); Surface White (#ffffff)
• Hairline: (#d9d9d9)

Example Component Prompts

• "Create a hero with a purple gradient background (#6e28af top → #ac8ffe bottom). Headline 50px Noto Sans weight 800, line-height 1.38, letter-spacing 1px, white. Subhead 20px weight 400 white. A white outline pill CTA: transparent bg, 2px solid #ffffff border, 9999px radius, 14px 70px padding, 28px weight 600 — 'Start for free'."
• "Design a pricing plan card: white #ffffff background, 12px radius, shadow rgba(99,99,99,0.2) 0px 2px 8px, no border, on a #f8f8f8 canvas. Primary CTA: #862983 background, white text, 6px radius, 4px 16px padding, 16px Noto Sans weight 600 ('Join Now'). Feature rows lead with a teal #12a3a0 checkmark."
• "Build a secondary button: white background, #862983 text, 1px solid #862983 border, 6px radius, 16px weight 600 ('Start for Free')."
• "Create a creator link-in-bio page: centered mobile column, avatar + handle header, full-width white link blocks at 6px radius, 8px 16px padding, 16px Noto Sans weight 600, soft rgba(0,0,0,0.05) 0px 1px 2px lift. Set the font stack 'Noto Sans, Noto Sans TC, sans-serif' for Traditional Chinese."
• "Create top nav: white header, 18px Noto Sans weight 600 links in navy #0c2340, magenta #862983 on the active item, with a plum #862983 'Join Now' pill (9999px) right-aligned."

Iteration Guide

1. Plum (#862983) is the single filled action color; teal (#00a6a3/#12a3a0) is the accent
2. Hero = purple gradient (#6e28af → #ac8ffe) + white headline + white outline pill
3. Signature accent = magenta→teal gradient (#bb53b9 → #00a6a3)
4. Noto Sans + Noto Sans TC stack; bold display (800/700) over 16px/400 body
5. Buttons 6px, cards 12px, large CTAs 20px, hero/nav pills 9999px
6. Card shadow is a soft grey rgba(99,99,99,0.2) 0px 2px 8px; nothing dark
7. Navy #0c2340 for nav/ink, #000000 only for marketing display headlines
8. Canvas #f8f8f8 under white surfaces; hairlines #d9d9d9

---

10. Voice & Tone

Portaly's voice is encouraging, growth-minded, and creator-first — it speaks to visual creators and small businesses as ambitious people turning an audience into income, not as users to be onboarded. The hero line "Your All-in-One Platform for Growth and Profit" and the supporting "Join 200,000 creators worldwide to turn passion into profit" set the register: aspirational, plain-spoken, benefit-forward, never jargon-heavy. Pricing copy ("Growth & monetization plans built for creators", "From basic presence to steady monetization — choose the plan that fits you") frames money positively and removes friction rather than pressuring.

Voice samples (verbatim from live surfaces):

• "Your All-in-One Platform for Growth and Profit" — hero headline (mission-framed). (verified live 2026-06-17, portaly.cc/)
• "Join 200,000 creators worldwide to turn passion into profit" — hero subhead (scale + benefit). (verified live 2026-06-17, portaly.cc/)
• "Growth & monetization plans built for creators" — pricing headline. (verified live 2026-06-17, portaly.cc/en/pricing)

Forbidden register: fear-based or scarcity urgency, undefined growth-hacking jargon, exclamation-heavy hype, dismissive or gatekeeping language toward small creators.

11. Brand Narrative

Portaly (傳送門) was launched in 2022 by CW Lin (林啟維) under Real Engine, Inc. (真實引擎), a Taiwan startup, to solve a problem visual creators and small Traditional-Chinese-speaking businesses faced: the dominant Western link-in-bio tools were built for a Latin, English-first audience and treated a creator's page as a bare list of links rather than a real, monetizable web presence. Portaly reframed the link-in-bio as a social landing page — a place to not only point followers outward but to sell, collect leads, and build a brand, localized first for the Taiwanese creator market.

The product grew into Taiwan's largest Traditional-Chinese link-in-bio / creator landing-page builder, serving a stated 200,000+ creators worldwide, with generative-AI page building added in 2023 — a launch that won #2 Product of the Day on Product Hunt (the badge still sits live on the homepage and pricing page). The company has been recognized in Taiwan's Neo 30 (2023) startup list and is a 500 Global alumnus.

What Portaly refuses, visible in its design: the cold, utilitarian aesthetic of a pure-utility link list, and the high-pressure monetization patterns of growth-hacking tools. What it embraces: a bright, optimistic creator-economy mood; a friendly magenta-and-teal identity carried by a curved-arrow swoosh; native Traditional-Chinese typography (Noto Sans TC); and copy that frames growth and profit as encouraging outcomes the creator owns.

12. Principles

1. A page, not a link list. Portaly treats a creator's page as a real, monetizable landing page. UI implication: full-width tappable link blocks, plan-grade cards, and product/lead blocks — structure beyond a bare list.
2. One action, one plum. Magenta-plum (#862983) means "do this." UI implication: reserve the saturated plum exclusively for the primary filled CTA so the next step is never ambiguous.
3. Teal is the brand's warmth. The teal-magenta duality and curved-arrow swoosh are the identity. UI implication: use teal (#00a6a3/#12a3a0) for accents, checkmarks, and the signature gradient; don't introduce a competing hue.
4. Traditional-Chinese first. The product is built for a Traditional-Chinese creator market. UI implication: always carry the Noto Sans TC fallback so CJK renders natively and consistently with Latin.
5. Optimistic, not pushy. Growth and profit are framed as encouraging outcomes. UI implication: keep CTAs free-forward and low-pressure; lean on bright color and airy layout, never scarcity or dark patterns.

13. Personas

Personas below are fictional archetypes informed by publicly observable Portaly user segments (Traditional-Chinese visual creators, small businesses, course/product sellers), not individual people.

陳郁婷, 27, 台北. An illustrator selling commissions and digital goods. Switched from a Western link-in-bio because Portaly let her build a real shopfront page in Traditional Chinese, collect leads, and take payment in one place. Values that the page feels like hers, not a generic list.

黃彥儒, 34, 台中. A fitness coach running paid programs. Uses Portaly's monetization blocks and AI page builder to spin up campaign landing pages fast. Likes that the free tier is genuinely usable and the upgrade ("the first 14 days free") feels low-risk.

林思妤, 41, 高雄. A small-shop owner driving social traffic to a single Portaly page. Appreciates the bright, friendly look that matches her brand and the plain pricing copy that tells her exactly what she gets — no jargon, no pressure.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is friendly but functional — consistent with the bright, approachable creator-economy mood. The billing toggle flips its plum thumb at motion-fast; link blocks and cards reveal/reorder at motion-standard / ease-enter with a small fade-from-below; the purple hero settles in once on load. A light delight is on-brand here (more than a fintech tool would allow), but never bouncy chaos — a creator's published page must feel stable and trustworthy. Under prefers-reduced-motion: reduce, all transitions collapse to instant and the product remains fully functional.