Design System Inspiration of Typed (Business Canvas)

1. Visual Theme & Atmosphere

Typed (타입드) is the flagship document-and-knowledge workspace built by the Korean productivity-software company Business Canvas (비즈니스캔버스), and its brand today lives across two very different but deliberately paired surfaces. The Typed product site (typed.do) — now a graceful shutdown notice — preserves the product's residual identity: a soft lavender-white canvas (#f9f8fc), a single confident electric violet (#a88ef5) reserved for the one call-to-action, a white notice card (#ffffff) ringed by a 2px soft-lavender border (#c9b5f4), and clean near-black text (#1a1a1a) over quiet muted grey (#6b6b6b). It reads calm, literate, and un-anxious — a product saying goodbye with dignity rather than a dead 404.

The parent corporate surface (business-canvas.com) carries the other half of the personality: a dark, cinematic, full-bleed scroll narrative set on pure black (#000000) with white and stepped-grey Pretendard text (#aaaaaa, #cccccc) telling the company's "유한의 여정, 무한의 가능성" (finite journey, infinite possibility) story. The signature move here is an electric lime (#cedc00) deployed not as fill but as a glow — a 0px 0px 10px halo behind pill links and a highlight marker behind key phrases — a jolt of energy against the darkness. Geometry is soft and modern: 12px and 16px radius cards, full 100px pill links, 40px round carousel controls, and a #333333 footer bar.

Together the system reads as calm-violet product plus high-energy dark corporate — two moods held by one company. The violet is the human, approachable product voice; the black-and-lime is the ambitious, editorial company voice. There is very little heavy chrome: separation comes from tint (#f9f8fc light vs #000000 dark), soft borders, and a single near-invisible card shadow (rgba(0,0,0,0.03)), never stacked elevation. Occasional faint grey (#888888) handles the lowest-emphasis captions.

Key Characteristics:

• Electric violet (#a88ef5) as the single Typed "action" color — reserved for the one CTA
• Soft-lavender 2px card border (#c9b5f4) framing white notice cards on a lavender canvas (#f9f8fc)
• Dark cinematic corporate canvas (#000000) with white / stepped-grey Pretendard text (#aaaaaa, #cccccc)
• Electric-lime (#cedc00) used as a glow halo and highlight marker, never as a solid fill
• Two type voices: Helvetica Neue on the product surface, Pretendard (five weights) on the corporate surface
• Near-black ink (#1a1a1a) and muted grey (#6b6b6b) instead of pure-black body text on light
• Pill-and-round geometry — 100px pill links, 40px round controls, 12/16px cards, 8px CTA
• Flat depth: a single rgba(0,0,0,0.03) card shadow; grouping by tint and border, not stacked shadows

2. Color Palette & Roles

Primary

• Typed Violet (#a88ef5): The primary brand color and single CTA background on typed.do. A soft, confident electric violet — the product's "do this" color.
• Lavender Border (#c9b5f4): A 2px soft-lavender outline on the white notice card; the muted sibling of the violet, used for framing rather than action.

Accent

• Electric Lime (#cedc00): Business Canvas's signal accent. Never a solid fill — it appears as a 0px 0px 10px glow halo behind pill links and as a highlight marker behind emphasized phrases. Maximum energy, minimum area.

Canvas & Surface

• Lavender Canvas (#f9f8fc): The near-white, faintly violet page background on the Typed product surface — softer and warmer than pure white.
• Dark Canvas (#000000): Pure black full-bleed background on the corporate scroll narrative.
• Surface White (#ffffff): White notice / content card fill, and text color on violet and on dark.
• Surface Dark (#333333): The corporate footer bar and dark secondary surface.

Text

• Ink (#1a1a1a): Primary near-black text and headings on light surfaces — warm, not harsh.
• Muted (#6b6b6b): Secondary / supporting copy on light surfaces (the shutdown subtext).
• Faint (#888888): Lowest-emphasis captions and fine print on light.
• On-Dark Muted (#aaaaaa): Grey body / label text on the black corporate canvas.
• On-Dark Soft (#cccccc): Slightly brighter grey for sub-headings on dark.

3. Typography Rules

Font Family

• Product surface (Helvetica Neue): typed.do uses "Helvetica Neue", Helvetica, Arial, sans-serif for its notice headline, subtext, and CTA — a neutral, timeless grotesque.
• Corporate surface (Pretendard): business-canvas.com uses the Pretendard family across five named weights — Regular, Medium, SemiBold, Bold, ExtraBold — the de-facto Korean product font, tuned for dense hangul legibility.

Hierarchy

Principles

• Two surfaces, two type voices: Helvetica Neue is the calm product voice; Pretendard is the ambitious corporate voice. They never mix within one surface.
• Weight carries hierarchy on dark: the corporate site steps from ExtraBold (800) titles down through Bold, SemiBold, Medium to Regular — weight, not color, is the primary signal.
• Hangul-first sizing: body sits at 16px with 1.5 line-height for comfortable hangul reading.
• Restraint on the product surface: the shutdown notice uses just three type sizes (24 / 16 / 14) — nothing decorative.

4. Component Stylings

Buttons

Typed Primary CTA

• Background: #a88ef5
• Text: #ffffff
• Radius: 8px
• Padding: 12px 24px
• Font: 14px / 600 / Helvetica Neue
• Height: 41px
• Use: The single primary action on typed.do (migration / action button)

Corporate Pill Link

• Background: #000000
• Radius: 100px
• Padding: 6px 18px
• Shadow: 0px 0px 10px #cedc00 (electric-lime glow)
• Font: 12px / 400 / Pretendard
• Height: 41px
• Use: Outbound pill links on the dark corporate canvas ("리캐치 웹사이트 바로가기")

Cards & Containers

Notice Card

• Background: #ffffff
• Border: 2px solid #c9b5f4
• Radius: 16px
• Padding: 40px 30px
• Shadow: 0px 4px 10px rgba(0,0,0,0.03)
• Use: The white Typed notice / content card centered on the lavender canvas

Corporate Content Card

• Radius: 12px
• Padding: 24px
• Use: Framer-built stat / story cards on the corporate scroll (media cards, "CANVAS Crew" stat card)

Badges

Lime Highlight Marker

• Background: #cedc00
• Text: #000000
• Radius: 0px
• Font: 16px / 400 / Pretendard
• Use: Electric-lime highlight bar drawn behind emphasized phrases on the corporate site

Navigation

Corporate Section Nav

• Text: #aaaaaa
• Active: #ffffff text
• Font: 22px / 700 / Pretendard Bold
• Use: Section navigation on the corporate site (HOME / ABOUT / PRODUCT / NEWSROOM)

Footer

• Background: #333333
• Text: #ffffff
• Padding: 16px 32px
• Use: Corporate footer contact / links bar (관련 사이트 / 공지사항 / Contact Us)

---

Verified: 2026-07-02 (omd:add-reference CREATE — Tier 1 live inspect, 2 brand-owned surfaces) Tier 1 sources: https://typed.do/ | https://www.business-canvas.com/ | https://www.business-canvas.com/en/blog/launch-business-canvas-website Tier 2 sources: getdesign.md/typed (0 DESIGN.md files — not listed); styles.refero.design/?q=typed (no brand-specific match — default browse grid returned) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: ~4px (measured paddings: 4, 6, 12, 16, 18, 24, 30, 32, 40px)
• Notable: the Typed notice card uses a generous 40px 30px inner padding; corporate content cards use a clean 24px; the footer bar uses 16px 32px

Grid & Container

• Typed product surface: a single centered notice card (max ~544px wide) floating on the lavender canvas — one column, one message
• Corporate surface: full-bleed, full-height cinematic scroll sections stacked vertically, each a self-contained "page" (Scroll to page 1–6 controls)
• Content cards group into responsive grids on the corporate story sections

Whitespace Philosophy

• One idea per viewport: the corporate scroll gives each statement its own full screen; the product notice gives the single goodbye message a wide, calm frame.
• Tint over borders: sections separate by canvas tint (#f9f8fc light vs #000000 dark), not heavy dividers.
• Air around the CTA: the violet button sits alone with room to breathe — reinforcing it as the single action.

Border Radius Scale

• Small (8px): the primary CTA
• Medium (12px): corporate content / media cards
• Large (16px): the Typed notice card
• Round (40px): corporate carousel / control buttons
• Pill (100px): outbound corporate links

6. Depth & Elevation

Shadow Philosophy: The system is nearly shadowless. On the light product surface there is exactly one soft card shadow (rgba(0,0,0,0.03)) — barely perceptible, just enough to float the notice off the lavender canvas. On the dark corporate surface, "depth" is created by the electric-lime glow (#cedc00) rather than any drop shadow: the halo makes a pill link feel active and energized against pure black. Grouping is done with canvas tint and the soft 2px lavender border, never with stacked elevation.

7. Do's and Don'ts

Do

• Reserve violet (#a88ef5) for the single primary CTA — keep it the one "action" color
• Frame white notice cards with the 2px soft-lavender border (#c9b5f4) on the lavender canvas (#f9f8fc)
• Use the electric lime (#cedc00) as a glow or highlight marker only — never as a solid fill
• Set the product surface in Helvetica Neue and the corporate surface in Pretendard
• Use near-black ink (#1a1a1a) for body text on light, not pure black
• Keep the corporate canvas pure black (#000000) with stepped-grey (#aaaaaa, #cccccc) text hierarchy
• Use pill geometry for outbound links (100px) and soft radii for cards (12–16px)
• Let one idea own one viewport — calm, generous framing over dense stacking

Don't

• Spread violet across many elements — it dilutes the single-action signal
• Fill areas with the electric lime — it is a glow / highlight, not a background
• Mix Helvetica Neue and Pretendard within the same surface
• Use pure black (#000000) for body text on the light product canvas — reserve near-black #1a1a1a
• Stack drop shadows for elevation — the system floats on a single rgba(0,0,0,0.03) lift
• Use sharp square corners on interactive chrome — links are pills, cards are rounded
• Add a second saturated accent — violet (product) and lime (corporate) are the only two hues

8. Responsive Behavior

Breakpoints

Touch Targets

• Typed CTA at 41px height with 12px 24px padding — comfortable primary target
• Corporate pill links at 41px height, full 100px radius for an unmistakable tap area
• Round carousel controls at 40px

Collapsing Strategy

• Corporate scroll: each full-height section maintains its full-bleed treatment, internal padding reduces on mobile
• Notice card: fixed max-width, gains side margin on large screens and fills width on mobile
• Story card grids: multi-column → stacked single column

Image Behavior

• Corporate media/video cards keep the 12px radius (top-rounded 12px 12px 0px 0px for media headers) across breakpoints
• The notice card carries no imagery — text-only, consistent at all sizes

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: Typed Violet (#a88ef5)
• Card border: Lavender (#c9b5f4)
• Accent glow / highlight: Electric Lime (#cedc00)
• Light canvas: Lavender White (#f9f8fc)
• Dark canvas: Black (#000000)
• Card / on-violet text: White (#ffffff)
• Footer / dark surface: #333333
• Ink text: #1a1a1a
• Muted text: #6b6b6b
• Faint text: #888888
• Grey on dark: #aaaaaa / #cccccc

Example Component Prompts

• "Create a centered notice card: white #ffffff background, 2px solid #c9b5f4 border, 16px radius, 40px 30px padding, shadow 0px 4px 10px rgba(0,0,0,0.03), on a #f9f8fc lavender canvas. Title 24px Helvetica Neue weight 700 #1a1a1a; subtext 16px weight 400 #6b6b6b. One violet CTA: #a88ef5 background, white text, 8px radius, 12px 24px padding, 14px weight 600."
• "Build a dark corporate section: pure black #000000 background. Hero 36px Pretendard weight 400 white; grey supporting text #aaaaaa. An outbound pill link: transparent on black, 100px radius, 6px 18px padding, with an electric-lime glow 0px 0px 10px #cedc00, 12px Pretendard label."
• "Add a lime highlight marker: #cedc00 background bar behind a phrase, #000000 text, 0px radius — used sparingly for emphasis."
• "Create a footer bar: #333333 background, white text, 16px 32px padding, links 관련 사이트 / 공지사항 / Contact Us."

Iteration Guide

1. Violet (#a88ef5) is the single product action color — never spread it
2. Electric lime (#cedc00) is glow / highlight only — never a fill
3. Helvetica Neue on the product surface, Pretendard on the corporate surface — don't mix
4. One soft shadow (rgba(0,0,0,0.03)); otherwise group by tint and the 2px lavender border
5. Pills (100px) for links, soft radii (12–16px) for cards, 8px for the CTA
6. Near-black #1a1a1a for body on light; stepped greys (#aaaaaa, #cccccc) on black

---

10. Voice & Tone

Business Canvas / Typed speaks in a calm, literate, quietly ambitious register — a company that treats work as a journey worth narrating and treats its users with dignity even at the end. The clearest proof is the product's own farewell: rather than a broken page, typed.do shows a composed notice that begins "We're saying goodbye" and explains, plainly, that the service has been discontinued and where users can migrate. No spin, no upsell. The corporate voice is more editorial and aspirational — the about narrative reads like a manifesto ("결과에 앞서 과정에서부터 증명하는 팀") rather than a feature list.

Voice samples (verbatim from live surfaces):

• "We're saying goodbye" — typed.do shutdown headline. (verified live 2026-07-02)
• "Typed.do has been discontinued" — typed.do shutdown subtext. (verified live 2026-07-02)
• "소프트웨어를 통해 기업의 일을 더 쉽게, 더 효율적으로, 더 효과적으로" — business-canvas.com hero. (verified live 2026-07-02)
• "결과에 앞서 과정에서부터 증명하는 팀" — corporate about section. (verified live 2026-07-02)

Forbidden register: hype superlatives, fake urgency, blaming users, and (critically) treating a shutdown as a marketing moment. The farewell must read as respect, not spin.

11. Brand Narrative

Business Canvas (비즈니스캔버스) is a Korean productivity-software company whose stated purpose — verbatim on its corporate hero — is "소프트웨어를 통해 기업의 일을 더 쉽게, 더 효율적으로, 더 효과적으로" ("making companies' work easier, more efficient, and more effective through software"). Its flagship product, Typed (타입드), was an AI-assisted document and knowledge-work workspace designed to pull scattered files and references into a single connected canvas — a "documents-as-a-graph" take on knowledge management aimed at teams drowning in fragmented docs.

The corporate site frames the company as a journey ("유한의 여정, 무한의 가능성" — a finite journey toward infinite possibility) and a team that proves itself "결과에 앞서 과정에서부터" (from the process, ahead of the result), backed by early investors visible on the About page (소풍벤처스 / Sopoong Ventures among them). (These company-history and investor details are drawn from the live corporate site and general public knowledge; specific founding dates and founder names are not independently re-verified in this pass.)

What is directly verifiable today is the ending and the pivot. Typed.do now serves a composed shutdown notice: the product has been discontinued (dated May on the notice), with English and Korean migration guides pointing users to Google Drive. Business Canvas itself continues, having redirected its energy toward newer products — re:catch (리캐치) and Typed Finance — both linked from the corporate site. The design tells this two-chapter story literally: the calm violet-and-lavender Typed surface is the product chapter closing gracefully, while the black-and-electric-lime corporate surface is the company chapter pressing forward with ambition.

12. Principles

1. Close with dignity. A discontinued product still deserves a designed goodbye. UI implication: replace dead ends with calm, honest notices — state the fact, provide the migration path, keep the brand's composure.
2. One action, one violet. UI implication: reserve #a88ef5 for the single primary CTA so the next step is never ambiguous; everything else stays neutral.
3. Energy as glow, not fill. The electric lime (#cedc00) signals momentum without shouting. UI implication: use it as a halo or highlight marker, never as a large background — a little goes a long way.
4. Two voices, one company. The product is calm and human; the company is bold and editorial. UI implication: let the product surface breathe (Helvetica Neue, lavender, soft) and let the corporate surface command (Pretendard, black, cinematic) — don't homogenize them.
5. Process over decoration. The brand celebrates the journey, not ornament. UI implication: flat depth, tint-based grouping, generous framing; nothing exists just to look busy.

13. Personas

Personas below are fictional archetypes informed by publicly observable Typed / Business Canvas user segments (knowledge workers, students, and small teams managing scattered documents), not individual people.

정민, 27, 서울. A graduate researcher who used Typed to link papers, notes, and drafts into one workspace. On learning of the shutdown, appreciated that the farewell page told her exactly how to export to Google Drive instead of leaving her stranded.

Daniel, 34, remote. A startup PM who evaluated Typed for team docs. Follows Business Canvas's newer products (re:catch, Typed Finance) via the corporate site and reads the editorial "journey" framing as a sign the team thinks in decades, not quarters.

수아, 31, 판교. A designer who admires the corporate site's craft — the cinematic black scroll and the restrained electric-lime glow — and cites it as an example of a Korean B2B brand with a genuine point of view rather than a generic SaaS template.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: On the corporate surface, motion is cinematic-but-controlled — full-height sections fade and settle as the user scrolls (the "Scroll to page 1–6" narrative), and the electric-lime glow (#cedc00) can pulse subtly to draw the eye to a pill link. On the calm product surface, motion is minimal: a gentle fade for the notice, no bounce, no spring. Under prefers-reduced-motion: reduce, scroll fades and the lime glow pulse collapse to instant; the content remains fully functional and readable.