Yourator DESIGN.md

Design System Inspiration of Yourator

Overview

Visual Theme & Atmosphere

Yourator is Taiwan's startup-and-digital-talent job board, and its design reads exactly the way a stylish recruiting product for the tech crowd should: clean, bright, friendly, and quietly confident without ever tipping into corporate stiffness. The page opens on a near-white canvas (#fbfbfb) rather than pure white, a softer paper-like ground that takes the clinical edge off and lets white cards (#ffffff) float gently above it. The single anchoring color is a clear, optimistic blue (#0063d1) — not the institutional navy of a bank, not the playful teal of a consumer toy, but a trustworthy, energetic blue that says "modern Taiwanese tech" the moment you land. Ink is a warm near-black (#333333) for headlines and body, while navigation and structural labels step down into a desaturated slate-blue family (#384e69, #566881, #8596ad) that keeps the chrome calm and the blue CTAs loud.

The defining typographic choice is Noto Sans TC — the Traditional Chinese member of the Noto superfamily — set as the primary face for both Han characters and Latin. This is a deliberate, regional decision: rather than bolting a Western webfont onto Chinese system fallbacks, Yourator commits to a single humanist sans that renders 繁體中文 beautifully at every size, with Helvetica Neue as the Latin fallback. The result is even color and consistent rhythm across mixed CJK/Latin lines (e.g. "AI 熱門職缺", "DEI 求職"), which matters enormously on a job board where titles constantly mix Chinese role names with English tech terms. Headlines run at a moderate 32px / weight 500 with a generous 1.5 line-height (48px) — Yourator never shouts in heavy display weights; it trusts spacing and the blue accent to carry hierarchy.

What gives Yourator its stylish, slightly editorial signature is its shadow language. Instead of generic gray drop-shadows, decorative cards use a hard, offset, no-blur shadow in a pale gray (rgb(242,242,242) 2px 3px 0px 0px) — a flat, almost "sticker" or risograph offset that feels designed and intentional rather than defaulted. Then, for genuinely elevated surfaces, it layers a brand-tinted soft shadow: rgba(0,38,90,0.1) (deep blue) paired with rgba(0,112,196,0.1) (the lighter brand blue), so even elevation carries a faint blue cast that ties back to #0063d1. The radius scale is tight and friendly — 2px on small chrome, 4px on buttons and inputs, 8px on cards and tint chips, and full pills (9999px) reserved for progress bars and avatars. Nothing is harsh; nothing is over-rounded.

Key Characteristics:

• Noto Sans TC as the single primary face — a regional commitment to Traditional Chinese, even color across CJK + Latin
• One clear interactive blue (#0063d1) doing all the brand and CTA work; everything else is slate-blue or warm ink
• Warm near-black ink (#333333) instead of pure black — friendly, not clinical
• Off-white canvas (#fbfbfb) with floating white cards (#ffffff)
• Signature flat offset shadow (rgb(242,242,242) 2px 3px 0px 0px) — risograph-style, designed not defaulted
• Brand-tinted soft elevation (rgba(0,38,90,0.1) + rgba(0,112,196,0.1)) for real lift
• Tight friendly radius scale: 2 / 4 / 8 / full — buttons at 4px, cards at 8px, pills only for progress + avatars
• Pale blue tints (#edf8ff, #cdeaff) for category chips and explore surfaces
• Moderate weights (400 / 500, with 700 for emphasis) — hierarchy from space and color, not heavy display weights

Primary tasks

• Browse open roles by industry or job category
• Narrow the search to internships, new-grad, or senior roles
• Compare roles by tech stack and team culture
• Build a resume before applying to any role
• Apply to a role and see the submission confirmed

Brand Narrative

Yourator (https://www.yourator.co) is a Taiwan-based job platform focused specifically on the startup and digital-talent ecosystem — connecting engineers, designers, product people, and marketers with modern teams across Taiwan and, through its Japanese-job track ("日系工作"), abroad. Where traditional Taiwanese job boards optimize for mass-market volume and dense listing density, Yourator positions itself as the curated, culture-forward alternative: it surfaces team culture, tech stacks, and growth-oriented roles, and pairs the board with practical tools (a resume builder, career content) that treat job-seeking as a craft.

The product's identity is built around the audience it serves: people who chose startups and digital work on purpose, and who expect the tools they use to look and feel as considered as the products they build. That is why the design leans stylish and editorial — the off-white paper canvas, the risograph-style offset shadows, the single confident blue, the committed Noto Sans TC typography — rather than the utilitarian gray density of incumbent boards. The themed verticals visible on the homepage (新創實習 startup internships, DEI 求職, 歡迎新鮮人 new-grad friendly, 中高階職缺 senior roles, 日系工作 Japan-track jobs) signal a platform that segments its audience by life-stage and value, not just by industry.

What Yourator embraces: a curated, culture-first view of work; tools that respect the job-seeker as a professional; and a clean, modern aesthetic that signals "we are part of the tech community we serve." What it rejects: the cold, high-density, volume-first feel of legacy job boards.

Principles

1. Curated over comprehensive. Yourator's value is selection, not volume. The design's calm, spacious layout reflects a board that shows you the right roles, not every role.
2. The tools should look like the work. The audience builds digital products; the platform they job-hunt on should feel equally crafted. Stylish offset shadows and committed typography are a trust signal to that audience.
3. One language, every script. Noto Sans TC for CJK and Latin together is a regional commitment — even color across mixed titles is a quality the audience notices.
4. Color carries meaning. A single blue (#0063d1) means "interactive." Calm slate-blue chrome stays out of the way so the blue can do its job.
5. Encourage, don't pressure. Job-seeking is framed as growth ("拓展求職視野"). The voice and the warm #333333 ink both refuse the cold, transactional feel of legacy boards.
6. Friendly geometry. Tight 4-8px radii and warm ink keep the product approachable; full pills are reserved, not default. Nothing harsh, nothing over-cute.

Personas

Personas below are fictional archetypes informed by Yourator's publicly observable audience segments (startup-bound engineers and designers, new graduates, mid-career switchers, and Japan-track seekers in Taiwan), not individual people.

Chen Yu-ting, 26, Taipei. Frontend engineer two years into her career, looking to move from a traditional SI firm to a product startup. Browses Yourator specifically because it surfaces tech stack and team culture, not just salary bands. Trusts the platform partly because it looks like the design systems she works in daily.

Lin Cheng-hao, 23, Hsinchu. Final-year CS student using the "歡迎新鮮人" (new-grad friendly) and "新創實習" (startup internship) tracks. Built his first resume with Yourator's resume tool. Values that the CTAs feel encouraging rather than corporate — it lowers the anxiety of a first job hunt.

Wang Mei-ling, 34, Taichung. Product manager considering a "日系工作" (Japan-track) role. Appreciates that Yourator segments by value and life-stage, and that the bilingual CJK/Latin typography renders Japanese-company role names cleanly.

Hsu Chia-wei, 29, Taipei. Designer at a Series-A startup, occasionally hiring through Yourator's employer side ("companies" surface). Notices and respects the offset-shadow / Noto Sans TC craft — to her it signals the platform understands design-literate users on both sides of the marketplace.

Colors

Primary

• Yourator Blue (#0063d1): The primary brand color. Fills every primary CTA ("註冊" / sign-up), colors all links, accents icons, and tints category chips. A clear, energetic, trustworthy blue — the single loudest element in an otherwise calm palette.
• Blue Hover (#2668a0): Deeper, slightly desaturated blue for hover/pressed states on primary actions and active links.
• Blue Deep (#00265a): The darkest brand blue, surfacing in the elevated shadow tint and for high-contrast blue text on tinted surfaces.

Surface & Canvas

• Canvas (#fbfbfb): The page background — an off-white, paper-like ground that softens the whole UI.
• Surface (#ffffff): Card and panel surfaces, floating above the canvas.
• Panel (#eceff6): Cool gray-blue panel fill for secondary sections and grouped backgrounds.

Blue Tints

• Tint Blue (#edf8ff): Very pale blue background for category / explore chips and informational tiles, paired with #0063d1 text.
• Tint Blue Strong (#cdeaff): A stronger pale blue for hover tints, highlights, and selected explore cards.

Ink & Neutral Scale

• Heading / Ink (#333333): Warm near-black for headlines (h1) and primary body text. Never pure #000000.
• Nav (#384e69): Desaturated slate-blue for navigation links and structural labels — calm chrome that lets blue CTAs dominate.
• Label (#566881): Mid slate-blue for secondary labels and active nav items.
• Body Muted (#8596ad): Light slate-blue for tertiary text, captions, and metadata.
• Muted Gray (#6c6c6c): Neutral gray for de-emphasized text and disabled labels.

Surface & Borders

• Hairline (#e5e7eb): The standard border / divider color for cards, inputs, and dividers — the most-used border by far.
• On-Primary (#ffffff): White text on blue CTA fills and dark surfaces.

Shadow Colors

• Flat Offset (rgb(242,242,242)): The signature pale-gray no-blur offset shadow color (2px 3px 0px 0px) — risograph-style designed depth.
• Shadow Blue Deep (rgba(0,38,90,0.1)): The far layer of the brand-tinted elevation shadow.
• Shadow Blue Light (rgba(0,112,196,0.1)): The near layer of the brand-tinted elevation shadow — echoes #0063d1.
• Shadow Modal (rgba(0,0,0,0.5)): Heavy neutral shadow for overlays and modals only.

Typography

Font Family

• Primary: Noto Sans TC, with fallback: Helvetica Neue, sans-serif
• Rationale: A single humanist sans that renders Traditional Chinese and Latin with even color — essential for a Taiwanese job board where titles constantly mix 繁體中文 role names with English tech terms.

Hierarchy

Principles

• One family, all scripts: Noto Sans TC carries both CJK and Latin. Do not introduce a separate Latin display font — the even color of a single humanist sans is the point.
• Moderate weights: 400 for body, 500 for headings and CTAs, 700 reserved for genuine emphasis. There is no ultra-bold display register; hierarchy comes from size, space, and the blue accent.
• Generous line-height: Body and headlines run at 1.5 — CJK text needs vertical breathing room, and Yourator gives it. Headlines at 32px/48px feel airy, not cramped.
• Largest is 32px: Even the hero headline tops out at a moderate 32px. Yourator is a working tool, not a splashy marketing site — restraint reads as competence.
• Blue for links, ink for text: Body is #333333; any #0063d1 text is by definition interactive (link, chip, or accent). Color carries meaning.

Layout

Spacing System

• Base unit: 8px
• Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px
• Observed button padding spans 6px 12px (compact) to 20px 32px 36px (large explore tiles), showing a comfortable, generous spacing temperament

Grid & Container

• Centered single-column hero with a prominent search bar
• Job listings as a responsive card grid (2-3 columns on desktop, single column on mobile)
• Category / explore tiles in a tint-blue tile grid
• Generous gutters; cards never crowd

Whitespace Philosophy

• Calm chrome, loud CTA: The slate-blue navigation and abundant off-white space keep the interface quiet so the single #0063d1 blue and its CTAs read instantly.
• Card breathing room: Job and company cards carry comfortable internal padding; the 1.5 line-height keeps dense CJK listings legible.
• Paper ground: The #fbfbfb canvas plus white cards creates a layered "documents on a desk" feel appropriate to a tool people use daily.

Border Radius Scale

• Hairline (2px): Small chrome, fine elements
• Standard (4px): Buttons, inputs, neutral tags — the workhorse
• Card (8px): Cards, tint chips, explore tiles
• Full (9999px): Progress bars, avatars, circular badges

Responsive Behavior

Breakpoints

Touch Targets

• Primary CTA at 36px height with comfortable padding
• Nav links at 16px with adequate spacing
• Tint chips sized for tapping with 8px radius and generous padding

Collapsing Strategy

• Hero: 32px headline maintained; search bar goes full-width on mobile
• Navigation: horizontal slate-blue links → hamburger toggle
• Job / company cards: 3-column → 2-column → single column stacked
• Category tile grid: reflows to fewer columns, then a horizontal scroll row on mobile
• Section spacing: 64px → ~40px on mobile

Image Behavior

• Company logos maintain circular (50% radius) crop at all sizes
• Card images keep consistent 8px radius
• Tint-blue tiles maintain their #edf8ff background and #0063d1 text across breakpoints

Elevation & Depth

Shadow Philosophy: Yourator runs two distinct depth languages. The everyday one is a hard, no-blur offset shadow (rgb(242,242,242) 2px 3px 0px 0px) — a risograph / sticker aesthetic that reads as deliberately styled rather than a default blur, and gives the product its approachable, editorial personality. The second, reserved for genuine elevation (hover, dropdowns, featured surfaces), is a brand-tinted soft shadow that pairs a deep blue (rgba(0,38,90,0.1)) far layer with a lighter brand-blue (rgba(0,112,196,0.1)) near layer — so even elevation carries a faint blue cast that echoes #0063d1. Heavy neutral shadows (rgba(0,0,0,0.5)) appear only on true overlays.

Decorative Depth

• Tint-blue tiles (#edf8ff / #cdeaff) create depth through color contrast rather than shadow
• The offset shadow does double duty as decoration, not just elevation

Values kept in prose

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

• shadow.flat: rgb(242,242,242) 2px 3px 0px 0px
• shadow.flat-sm: rgb(242,242,242) 1.5px 2px 0px 0px
• shadow.elevated: rgba(0,38,90,0.1) 0px 9px 26px 0px, rgba(0,112,196,0.1) 0px 10px 14px 0px
• shadow.modal: rgba(0,0,0,0.5) 0px 5px 15px 0px

Motion & Easing

Durations:

Easings:

Signature motions.

1. Card hover-lift. Job and company cards transition from the flat offset shadow to the brand-tinted elevated shadow (rgba(0,38,90,0.1) + rgba(0,112,196,0.1)) on hover over motion-standard / ease-enter, with a subtle 2px rise — the offset "lifts off the page."
2. Chip selection. Filter / category chips tint from #edf8ff to #cdeaff over motion-fast when selected — quick, responsive, no overshoot.
3. CTA press. Primary blue buttons darken to #2668a0 over motion-fast. No spring, no bounce — clean and trustworthy.
4. Reduce motion. Under prefers-reduced-motion: reduce, hover-lifts and transitions collapse to instant state changes; the board stays fully functional without decorative motion.

Components

Buttons

Primary (Blue Fill)

• Background: #0063d1
• Text: #ffffff
• Padding: 6px 12px (compact) — up to 8px 60px on hero CTAs
• Radius: 4px
• Height: 36px
• Font: 14px Noto Sans TC weight 500
• Hover: #2668a0 background
• Use: Primary CTA ("註冊" sign-up, "立即開始", "投遞履歷")

Ghost / Outlined

• Background: transparent
• Text: #0063d1
• Padding: 6px 12px
• Radius: 4px
• Border: 1px solid #e5e7eb
• Font: 14px Noto Sans TC weight 500
• Hover: #edf8ff tint background
• Use: Secondary actions, alternate paths

Tint Chip / Explore

• Background: #edf8ff
• Text: #0063d1
• Radius: 8px
• Font: 16px Noto Sans TC weight 400
• Use: Category / industry explore chips ("AI 熱門職缺", "前端工程師", "DEI 求職")

Cards & Containers

• Background: #ffffff
• Border: 1px solid #e5e7eb
• Radius: 8px
• Shadow (flat signature): rgb(242,242,242) 2px 3px 0px 0px — hard offset, no blur
• Shadow (elevated): rgba(0,38,90,0.1) 0px 9px 26px 0px, rgba(0,112,196,0.1) 0px 10px 14px 0px
• Hover: lift to the brand-tinted elevated shadow

Tags / Pills

Tint Tag

• Background: #edf8ff
• Text: #0063d1
• Radius: 8px
• Padding: ~4px 12px
• Font: 12-14px Noto Sans TC weight 400

Neutral Tag

• Background: #eceff6
• Text: #566881
• Radius: 4px
• Font: 12px weight 400

Inputs & Forms

• Background: #ffffff
• Border: bottom-rule only (0px none on the sides; a single bottom hairline #e5e7eb) — square, minimal underline-style fields
• Radius: 0px (search/hero inputs) or 4px (boxed form fields)
• Text: #333333, 16-18px Noto Sans TC
• Placeholder: #8596ad
• Focus: #0063d1 underline / border

Navigation

• Clean horizontal nav on near-white canvas, sticky
• Brand logotype left-aligned
• Links: Noto Sans TC 16px weight 400, #384e69 text; active/hover steps to weight 500 / #566881
• CTA: blue #0063d1 "註冊" button right-aligned, 4px radius, white text
• Mobile: hamburger toggle

Avatars & Logos

• Company logos and user photos render as circles (50% radius)
• Progress indicators use full pills (9999px radius) in #0063d1

Decorative Elements

Flat Offset Shadow

• rgb(242,242,242) 2px 3px 0px 0px (and 1.5px 2px 0px 0px for smaller chips) — the signature designed, no-blur offset that gives Yourator its stylish, slightly editorial feel

Blue Tint Tiles

• #edf8ff / #cdeaff tinted explore tiles with #0063d1 text for industry / category navigation

---

Verified: 2026-06-08 (omd:add-reference — Tier 1 live inspect) Tier 1 sources: https://www.yourator.co (live DOM, playwright getComputedStyle — body, h1, nav, primary CTA #0063d1 4px / 36px / weight 500, flat + brand-tinted shadows, radius scale); https://www.yourator.co/companies (employer surface, same Taiwan site) Country sources: https://www.yourator.co (繁體中文 brand homepage, TW), https://www.yourator.co/companies (Yourator employer page, TW) — see .verification.md Method: playwright headless getComputedStyle on the live DOM; rgb()→hex conversion; >=6 measured samples collected. .verification.md: web/references/yourator/.verification.md

States

Do's and Don'ts

Do

• Use Noto Sans TC for everything — CJK and Latin alike — for even color across mixed titles
• Use #0063d1 as the single primary/CTA/link blue; let it be the loudest thing on screen
• Keep ink warm: #333333 for headings and body, never pure #000000
• Set the page on the off-white #fbfbfb canvas with white (#ffffff) cards floating above
• Use the signature flat offset shadow (rgb(242,242,242) 2px 3px 0px 0px) for default card lift
• Reserve the brand-tinted soft shadow (rgba(0,38,90,0.1) + rgba(0,112,196,0.1)) for real elevation
• Keep radius friendly and tight: 4px buttons, 8px cards, full pills only for progress + avatars
• Use pale blue tints (#edf8ff, #cdeaff) for category / explore chips with #0063d1 text

Don't

• Don't introduce a separate Latin display font — Noto Sans TC carries both scripts
• Don't use heavy display weights for headlines — 500 is the headline weight; 700 is for emphasis only
• Don't use pure black (#000000) — warm #333333 ink is the brand's voice
• Don't use generic gray blur shadows for default cards — the flat offset is the signature
• Don't over-round — no large pill buttons; pills are for progress bars and avatars only
• Don't let nav chrome compete with CTAs — keep navigation in the calm slate-blue family (#384e69)
• Don't use #0063d1 for non-interactive text — blue text means "clickable" here
• Don't crowd cards — the generous 1.5 line-height and comfortable padding are essential for CJK legibility

Do

• Treat #0063d1 as the one interactive blue — CTAs, links, accents, selected states
• Set everything in Noto Sans TC with the Helvetica Neue fallback
• Keep the page on #fbfbfb canvas with white #ffffff cards
• Use the flat offset shadow (rgb(242,242,242) 2px 3px 0px 0px) as the default card depth
• Reserve the brand-tinted soft shadow for genuine hover / elevation
• Frame copy as growth and encouragement, in warm #333333 ink
• Keep radii tight and friendly (4px / 8px), pills only for progress + avatars

Don't

• Don't reach for a second blue or a competing accent — one blue, one meaning
• Don't use pure black ink or heavy display weights
• Don't replace the signature offset shadow with a generic gray blur on default cards
• Don't over-round buttons into large pills or crowd CJK text with tight line-height
• Don't let nav chrome shout — keep it in the calm slate-blue family
• Don't write pushy, hype-stacked, or HR-corporate copy

Voice & Tone

Yourator's voice is encouraging, practical, and peer-to-peer — it speaks to ambitious young Taiwanese professionals who want to work at startups and digital teams, not to HR departments. The register is warm 繁體中文 with comfortable code-switching into English tech vocabulary ("AI 熱門職缺", "DEI 求職", "全端工程師") that mirrors how its audience actually talks. Calls to action are direct and motivating ("立即開始製作履歷", "拓展求職視野，找到你的理想工作") — they frame job-seeking as an act of growth and self-investment, never as desperation. The headline "拓展求職視野，找到你的理想工作" ("Expand your job-search horizons, find your ideal job") captures the whole posture: aspirational, supportive, forward-looking.

Forbidden register. Stiff corporate HR-speak, desperation framing, hype superlatives ("革命性", "顛覆"), and exclamation-stacked urgency. Yourator is encouraging, not pushy.

Agent Prompt Guide

Quick Color Reference

• Primary CTA: Yourator Blue (#0063d1)
• CTA Hover: Blue Hover (#2668a0)
• Canvas: Off-White (#fbfbfb)
• Card surface: White (#ffffff)
• Heading / body ink: Warm Near-Black (#333333)
• Nav text: Slate-Blue (#384e69)
• Secondary label: Mid Slate (#566881)
• Muted text: Light Slate (#8596ad)
• Border: Hairline (#e5e7eb)
• Tint chip bg: Pale Blue (#edf8ff), text #0063d1
• Link: Yourator Blue (#0063d1)

Example Component Prompts

• "Create a hero on an #fbfbfb canvas. Headline at 32px Noto Sans TC weight 500, line-height 1.5, color #333333. A prominent search input with a single bottom hairline (#e5e7eb), 18px #333333 text. Primary blue CTA (#0063d1, 4px radius, white text, 14px weight 500, 36px height)."
• "Design a job card: white #ffffff background, 1px solid #e5e7eb border, 8px radius, flat offset shadow rgb(242,242,242) 2px 3px 0px 0px. Title at 18px Noto Sans TC weight 500 #333333, company at 14px weight 400 #8596ad. A tint tag (#edf8ff bg, #0063d1 text, 8px radius)."
• "Build a category explore tile: #edf8ff background, 8px radius, #0063d1 label text at 16px Noto Sans TC weight 400. On hover, lift to rgba(0,38,90,0.1) 0px 9px 26px 0px, rgba(0,112,196,0.1) 0px 10px 14px 0px and tint to #cdeaff."
• "Create navigation: near-white sticky header. Noto Sans TC 16px weight 400 links in #384e69, active step to weight 500 / #566881. Blue '註冊' CTA right-aligned (#0063d1 bg, white text, 4px radius, 36px height)."
• "Design a primary button: #0063d1 fill, white text, 4px radius, 14px Noto Sans TC weight 500, 36px height, 6px 12px padding. Hover background #2668a0."

Iteration Guide

1. Always use Noto Sans TC with Helvetica Neue fallback for all text — one family, all scripts
2. #0063d1 is the only brand/CTA/link blue; everything interactive is blue, nothing else is
3. Headlines top out at 32px / weight 500; use 700 only for genuine emphasis
4. Ink is #333333; nav and chrome live in the slate-blue family (#384e69 / #566881 / #8596ad)
5. Default card depth is the flat offset rgb(242,242,242) 2px 3px 0px 0px; real elevation uses the brand-tinted blue pair
6. Radius scale: 4px buttons/inputs, 8px cards/chips, full pills only for progress + avatars
7. Canvas is #fbfbfb, cards are #ffffff — never the reverse
8. Tint chips are #edf8ff bg with #0063d1 text; stronger hover tint is #cdeaff

---