CI 变为红色，但屏幕上仍保留橙色。
当我们第一次创建网站时，HLB 的颜色是橙色。组CI更改为红色后，徽标被替换，但旧的橙色仍然保留在选项卡和子页面的突出显示颜色中。在一个屏幕上，两种颜色代表不同时期的公司。
根据组的红色重新定位颜色BLUECANVAS SELECTED WORKHLB THERAPEUTICS · BIO & PHARMA
01 / 概述项目概述
罕见病新药与医药冷链，
一语两行。
HLB Therapeutics是一家针对没有处方药的罕见疾病开发新药并在全国范围内分销温度敏感生物制药的公司。我们正在开发治疗眼病的 RGN-259 和治疗胶质母细胞瘤的 OKN-007，并在全国七个中心运营药品冷链。
BlueCanvas 创建了当前的 HLB Therapeutics 网站后，公司名称和 CI 发生了变化，冷链业务在全国范围内发展。随着公司的发展，我们认为是时候重新设计网站了，所以我们提出了更新的方向。本页是提案及过程的记录。
运营 HLB Therapeutics 网站- #生物上市公司
- #罕见病新药
- #医药冷链
- #IR信息结构
- #管道可视化
- #品牌体验
- #设计系统
- ＃相互作用
- #响应式
它是从公司走过的数字开始的。
2000
公司成立年份
2021 年更名为 HLB Therapeutics
2010
科斯达克上市年份
HLB集团旗下生物公司
2件
被美国FDA指定为孤儿药
RGN-259·OKN-007
7处
国家冷链中心
从九里总部到济州
数字来源：HLB Therapeutics网站公开数据（2026年10月确认）
02 / THE QUESTION
开发 公司 疫苗 携带 公司 第一次 关于 对人 HLB 治疗 第二次 哪个 朝向 你应该看吗？ 两个 商业 d 公司的 故事 被告知 句子
ANALYSIS
我在当前网站上发现的三件事
我在当前网站上发现的三件事
我以第一次访问者的眼光再次阅读了我们创建的网站。这些年公司发生了很大的变化，屏幕却跟不上变化。
这两家公司看起来像是两家不同的公司。
暗DNA图像中单独介绍了管道，配送中心表和地图中单独介绍了冷链。对于关注新药开发的投资者和试图委托疫苗分销的制药公司来说，很难从同一家公司读出相同的原则。
将两项业务合而为一：“直到我们到达”重要新闻
堆积如山。
临床进展公告、股东大会信息和认证新闻也列在同一列表中。股东、合作伙伴和冷链客户很难选择和阅读他们需要的新闻。
用节目或商业标签标记每条新闻，以便人们可以有选择地阅读它们。我首先画了打开网站的
四个人。
访问上市生物公司网站的人比您想象的要多。访问者按打开网站的原因划分，而不是按年龄或职业划分。这是因为，由于不同的原因，您首先应该看的屏幕也有所不同。
这个公告意味着什么？
- 最近披露的信息和投资者关系数据
- 管道进展
- 股东信息
在提案中，在第一个屏幕上显示最近的新闻报道
我们能否确认这种物质的基础？
- 关键材料说明
- 临床信息和论文
- 合作咨询窗口
在提案中，按项目列出的研究材料列表
我可以将我们的疫苗委托给您吗？
- 温度标准及管理体系
- 中心位置及设施
- 报价查询
在提案中温标和中心地图
正在开发针对这种疾病的药物吗？
- 用简单的话来说疾病
- 正在开发的程序
- 临床信息链接
在提案中，每种疾病的简单解释卡
03 / BRAND THINKING
这两家公司
这两家公司
做着同样的事情。
- 01·新药开发准时
一种物质从许可引进到临床试验和批准，需要很长时间才能到达患者手中。开发新药需要经受时间的考验。
- 02·医药冷链保持温度
从中心到医院，生物药品不得超过规定的温度。冷链是指将温度保持到最后。
- 03 · HLB 疗法它到达了人们
观察到的时间和温度最终到达了一个人。根据Human Life Better的管理愿景，美好的生活从那一刻开始。
BRAND STATEMENT
人类生活更美好
如果翻译成韩语的话
“直到到达患者手中。”
来自管理愿景“人类生活更美好”来自提议的句子“直到到达患者手中”
说得一清二楚。
用步骤和日期说话，而不是夸张的限定词。因为生物上市公司首页的一句话就可以用来做出投资决策。
我再写一次。
在疾病或物质的名称旁边，添加了患者和家属可以阅读的解释。不要删除技术术语，而应在附近保留简单的语言。
请注意，格式相同。
临床新闻和公告始终以相同的顺序和格式显示。格式必须相同，以便您可以并排比较旧新闻和新新闻。
VISUAL PRINCIPLE · CLARITY
让一些东西变得模糊
让一些东西变得模糊
清晰。
- 01困难的科学术语被简单的单词重写。
- 02发展阶段总是用相同形状的线表示。
- 03准备投资者的语言和患者的语言。
RGN-259是一种针对角膜疾病而开发的滴眼剂。我认为一家开发眼科药物的公司的网站应该比其他任何东西都清晰可读。
PHOTOGRAPHY DIRECTION
我们不使用人类的面部表情，而是用
我们不使用人类的面部表情，而是用
光和物质来说话。
现在第一个屏幕是一个人在滴眼药水的图片。一家处理罕见疾病的公司没有关注陌生模特的面部表情，而是制定了摄影标准，通过实验室的光线、材料和温度来讲述故事。
- 做手和工具，光和物质
- DO冷光和整洁的场景构图
- 不要带有夸张面部表情的库存模型
- 不要按原样显示患病区域的照片
04 / COLOR SYSTEM
该组的红色保持不变，写入位置为一滴。
HLB Therapeutics 的红色是该团队使用的 CI 颜色。我决定不改变红色，而是只保留它代替一个小玩意，而不是绘制屏幕的颜色。其余部分则覆盖着深墨色和冷冰色。
HLB Red#EF3E36RGB 239 62 54
到达信号
这是 CI 红组。仅写下您需要首先查看的一个地方，例如您当前的阶段和到达点。
- 白色字母
- 3.9:1 大字母
- 水墨书写
- 4.8:1 AA
Text Red#C42B22RGB 196 43 34
红色的字样是
当文本或链接必须在白色背景上以红色书写时，使用更深的红色级别。
- 白色字母
- 5.7:1 AA
- 水墨书写
- 3.3:1 大字母
Ink#0B1220RGB 11 18 32
科学的基础
正文和黑暗场景的背景。它的色调比黑色更蓝，因此与冰色自然融合。
- 白色字母
- 18.7:1 AAA
- 水墨书写
- 1.0:1 禁用
Frost#9CC3D5RGB 156 195 213
冷助理
在深色背景上书写辅助字母、线条和温度图表。
- 白色字母
- 1.9:1 未使用
- 水墨书写
- 10.0:1 AAA
Ice#EAF2F5RGB 234 242 245
清晰的一面
在卡片上写字，其亮面较宽，可在屏幕上创建一个凉爽的空白区域。
- 白色字母
- 1.1:1 禁用
- 水墨书写
- 16.5:1 AAA
Paper#F7F9FARGB 247 249 250
默认背景
是比纯白色更护眼的基础底色。照片和卡片放在上面。
- 白色字母
- 1.1:1 禁用
- 水墨书写
- 17.7:1 AAA
红色占 2%，
仅在一个最重要的地方。
背景和文字占据了大部分屏幕，冰色占据了大面积，霜色占据了线条和辅助信息。红色仅放置在屏幕上您希望首先看到的一个位置，例如当前阶段、总部位置或超标温度。
白底CI红的亮度对比度为3.9:1，所以不用于小字。当文本需要为红色时，将其更改为文本红色，对比度为5.6:1。
尝试·色温
颜色还取决于温度。
在冷链屏幕上，每个温度使用的颜色都是预先确定的。越冷，霜色越深，以冰色带表示，2~8℃是冷藏生物药品的标准。仅当标准超出范围时，红色才会亮起。
5℃冷藏标准2~8℃ · 正常
排版三种声音
直到到达患者手中
韩语语音
从标题到正文，韩语都被归为一个语系：Pretendard。粗体标题应书写紧密，字母间距较窄，文本应书写舒适，行距为 1.75。
RGN-259
节目名称的声音
大开的英文文本与HLB字标的几何字母相匹配，在大屏幕上清晰地突出节目名称。
2026.10.12
2–8℃ · Phase 3
数据的声音
需要比较的数字（例如日期、阶段和温度）采用等宽字体。只有当数字具有相同的数字时，才能快速读取该表。
- Display96 / 800 / -0.06em
- Heading56 / 800 / -0.05em
- Title28 / 700
- 主体18 / 400 · 领先 1.75
- Data15 / 500 · Mono · tabular
05 / GRAPHIC SYSTEMLINE & DROP
只需一根线和一滴即可绘制所有流程。
线代表时间和路径，水滴代表到达和现在。仅用两个形状，我们就绘制了管道、冷链路线、历史和披露列表，以便在任何屏幕上都可以将它们视为同一家公司。
06 / 设计方向相同的骨架，四种表情
在得出正确答案之前，我们列出了
四种可能性。
即使您从相同的事实和相同的信息结构开始，网站的性质也会根据您首先显示的内容而有很大差异。我把网站从四个方向画了一遍：连接两个业务的一句话、为患者提供的科学、为投资者提供的数字、以及冷链温度。
下面的屏幕是实际提出的提案。当您滚动时，每个提案的主页都会从上到下移动。
STRUCTURE FIRST
在上色之前，我首先用一个灰色的盒子组装了骨架。通过移动手柄，您可以在同一屏幕上比较骨架和成品版本。
最终报价
直到达到直到达到
这两项业务被分为“保持时间”和“保持温度”，并在两条线交汇的末端放置了一个红色的铃铛。该公司的故事平静地展开，从黑暗的第一屏幕转向明亮的正文。
- 第一个屏幕打开时，水面上有一个红色的水滴和一条线。
- 显示当前阶段有气泡的管道板
- 从九里总部到全国的冷链图
Pretendard ExtraBold · Archivo · Plex Mono
导航建议
清晰的科学清晰的科学
方向是用通俗易懂的方式解释科学，让患者、家属、医护人员了解疾病和物质。大而著名的标题和明亮的镜头照片不言而喻。
- 第一个屏幕打开时有水滴，它们像透镜一样收集光线。
- 三张卡片简单地解释了这种疾病
- 胸腺素 beta 4 以 43 个点显示
Noto Serif KR · Pretendard
导航建议
投资者服务台用数字说话
股东和合作伙伴首先寻找的信息披露和渠道都集中在第一个屏幕上。日期和步骤在黑色仪表板上排列为等宽数字。
- 在一个屏幕上收集管道、披露和关键数字的仪表板
- 2000年以来的历史轴
- 从许可进入到许可退出的商业模式
Archivo Expanded · IBM Plex Mono
导航建议
冷链保持温度
这是从温度方面介绍公司的方向。巨大的“2-8℃”和霜晶照片首先证明了冷链的准确性。
- 第一屏2-8℃大设定
- 温标-70℃至室温
- 全国七个中心，十二个配送流程阶段
Archivo Black · Pretendard · Plex Mono
决策您选择的标准是什么？
提出一个
同时谈论两个业务的提案，而不是最华丽的提案。
根据六项标准对这四项提案进行了评估。最重要的标准是新药研发和冷链能否被解读为一家公司的故事。这是因为只关注业务一侧的提案会错过另一侧的访客。
评估标准A · 直到达到B · 清晰的科学C · 用数字说话D · 保持温度
与团体 CI 和谐
两家公司合而为一
投资者获取信息的权限
对患者和医务人员的理解
内容运营与拓展
与其他生物公司的差异化
B·生动的科学
一张用简单的话解释疾病的卡片
C·用数字说话
公开快捷方式和固定宽度数字
D·保持温度
温标和中心图
A · 直到我们到达最终提案
未被采纳的提案的优点并没有被丢弃，而是被移至方案A的详细信息页面。
- 01再看一遍看运营网站和公开资料
- 02分享定义您访问的四个原因
- 03设立找到一句话将两家企业联系起来
- 04绘图四个主页提案
- 05选择根据六个标准共同评估
- 06炼油管道·冷链筛分及移动
07 / PIPELINE相同的数据，两种语言
投资者的步骤，
对于患者来说，疾病是第一位的。
该管道根据相同的数据准备了两种解释。投资者和合作伙伴首先查看开发阶段和指定状态，患者及其家人了解该药物用于治疗什么疾病。您可以使用下面屏幕上的按钮更改这两个描述。
正在开发的程序
提案画面
RGN-259胸腺素β4滴眼液
神经营养性角膜炎NK眼科·SEER·美国FDA指定为孤儿药
一种角膜伤口无法愈合的罕见疾病。这是一种退行性疾病，角膜的感觉减弱，即使是小伤口也不容易愈合并复发。 RGN-259 是针对这种疾病开发的滴眼剂。
第三阶段临床试验：这是在获得批准之前在许多患者中确认有效性和安全性的阶段。
RGN-259胸腺素β4滴眼液
干眼症DED眼科 · ARISE
泪液不足或容易干燥的疾病。这是一种泪液层的数量和质量减少或眼睛表面受损，导致干燥和烧灼感的疾病。
第三阶段临床试验：这是在获得批准之前在许多患者中确认有效性和安全性的阶段。
OKN-007地舒芬钠
胶质母细胞瘤·新诊断GBM脑肿瘤·研究员临床试验·被美国FDA指定为孤儿药
在新诊断的脑肿瘤中，胶质母细胞瘤是最恶性的肿瘤。美国研究人员正在临床上证实该方法可与放射治疗和替莫唑胺联合使用。
二期临床试验：这是检查患者效果并找到合适剂量的阶段。
OKN-007地舒芬钠
胶质母细胞瘤 · 复发性GBM脑肿瘤 · 口服临床试验
我们正在对复发性胶质母细胞瘤患者进行口服药物的临床试验。
一期临床试验·这是第一个注重安全性的临床阶段。
开发阶段是2026年10月HLB Therapeutics网站上披露的进度状态的转移。
CORE SUBSTANCE
由 43 个氨基酸组成的小蛋白质。
胸腺素 beta 4 是 RGN-259 的核心物质，是一种小蛋白质，几乎存在于我们身体的每个组织中。在详细页面上，这些解释首先以数字和点的形式显示，研究材料放在它们的下面。
08 / COLD CHAIN
从中心到医院，
从中心到医院，
温度保持不变。
冷链是一项需要展现隐形工作的生意。我们提出了一个屏幕，用地图上的一条线连接全国的七个中心，并显示正在传输的温度和标准范围。
- 首都圈从九里总部和利川大型冷藏中心出发。
- 岭南地区连接大邱、釜山的仓库以及金海的岭南中心。
- 湖南·济州光州仓库和济州直接中心按照相同标准进行管理。
十二个工作步骤
一行。
从验收收货到确认发货完成，一盒药品经历的十二个步骤排成一行。您可以一目了然地了解您的客户目前处于哪个阶段，并了解每个阶段必须遵循的管理标准。
- 01来料检验
- 02SKU分类
- 03库存登记
- 04专用空间
- 05收到交货单
- 06系统上传
- 07上传调度系统
- 08打印运输单据
- 09拣货·包装
- 10分类加载
- 11交货
- 12确认交付完成
- 每种药品专用存储每个客户专用空间和超低温疫苗存储
- KGSP设施安全、消防、防虫、应急发电设施
- 验证储存/运输容器/车辆、KOLAS校准
- TMS·WMS连接配送与仓储的数字化管理
- 应急响应对策委员会和情况应对手册
- 岗位培训·文档管理KGSP岗位培训、SOP和数据完整性
09 / 投资者关系等待公告的人士
即使新闻类型不同，
格式始终相同。
生物上市公司首页访问频率最高的地方是投资信息。信息披露、投资者关系材料和股东信息可以直接从第一个屏幕上的一行打开。
临床试验相关新闻以卡片形式呈现，保留了项目、适应症、阶段、一句话总结、原文公告的顺序。如果每个帖子都具有相同的格式，您可以并排比较新旧帖子。
最近公告提案屏幕
- 举办机构说明会（IR）信息披露
- 证券发行结果（自愿披露）披露
- 冷链质量与环境管理体系国际标准认证新闻稿
- 关于召开HLB集团综合股东大会的通知通知
信息披露IR资料室股东信息治理结构
10 / MOBILE即使在手掌中也不会断裂的线条
即使在小屏幕上
线条也是连续的。
检查公开披露的股东和寻找中心位置的客户通常是第一次使用手机打开该网站。在小屏幕上，最新新闻直接放在第一个屏幕下方，管道水平滚动。
- 主屏幕下方的最新公告
- 水平查看管道步骤
- 中心指南更改为列表而不是地图
- 拇指接触到的接触按钮
DESIGN SYSTEM零件
零件
来自同一生产线
按钮和标签、步骤栏甚至温度芯片。我们将其分为多个部分，以便即使负责人发生变化也可以创建相同的屏幕。
YOUR SCIENCE, SEEN CLEARLY.
谁应该接触您的技术？
生物制药公司的网站是由投资者、合作伙伴、患者和求职者阅读的。
让我们从谁来开始吧。
- Client
- HLB Therapeutics
- Scope
- 研究、品牌体验策略、信息架构、UI设计、交互原型
- Brand
- CI：HLB Group · 分析和网络应用：BlueCanvas
- Status
- 改版提案（最终未通过）·制作运营网站
