Design System Inspiration of Qraft Technologies

Overview

Visual Theme & Atmosphere

Qraft Technologies (크래프트테크놀로지스) is a Seoul-headquartered AI-fintech that builds quantitative investment products — AI-managed ETFs, an AI hedge fund, and market-intelligence execution engines — and its homepage carries itself like an institutional research house that happens to be run by machine-learning engineers. The hero opens on a pure black canvas (#000000) with a single oversized Inter headline in white (#ffffff) — “Transforming Investing with AI” at 87px, weight 600 — set against near-empty space. There is no gradient, no illustration, no glow: just black, one line of type, and a quiet supporting sentence noting the company was founded in 2016 and backed by SoftBank Group. The register is confident and sparse, closer to a hedge fund’s tear sheet than a consumer app.

The system runs on a deliberate two-face type pairing. Inter does the heavy display work — the 87px hero, the About-page hero, the outline CTAs — while Helvetica Neue carries the section architecture at 52px/500 for titles like “News Coverages” and “Milestone”, stepping down through 28px sub-heads to a 13px caption. Body copy and navigation fall back to plain Arial, the workhorse of the underlying Squarespace chassis. The effect is corporate-Swiss: neutral grotesques, tight leading, almost no decorative flourish. Weight, not color, does the emphasis — 600 for the hero, 500 for headings, 400 for everything that merely informs.

Color is rationed to near-monochrome. The identity lives on black (#000000), white (#ffffff), a light institutional grey (#d9d9d9) for footer chrome and dividers, and a warm off-white cream (#fbfaf7) for the news-coverage cards. The one saturated brand hue is a royal blue — #1033d4 — reserved for the “Qraft Capital” wordmark highlight, and it reappears as a tint system on the About page: blue chips (#2f67d6 at low alpha with #234a93 text) mark milestones, paired with an amber accent (#ffaf2a tint over #7a4600 text) for a second category. Depth is almost entirely flat: live inspection returned box-shadow: none across the hero, nav, headings, and cards — separation comes from hairline borders (rgba(15,18,24,0.1), i.e. #0f1218 at 10%) and background shifts, never elevation.

Key Characteristics:

• Pure black (#000000) hero canvas with a single 87px Inter/600 white headline — institutional, sparse, no decoration
• Two-face type system: Inter for display, Helvetica Neue for section headings, Arial for body/nav
• Near-monochrome palette — black, white, grey (#d9d9d9), cream (#fbfaf7) — with weight, not color, carrying hierarchy
• One saturated brand accent: royal blue #1033d4 (the “Qraft Capital” highlight)
• Blue-tint chip system on About (#2f67d6 / #234a93) + an amber category tint (#ffaf2a / #7a4600)
• Flat depth: box-shadow: none everywhere; separation via #0f1218-alpha hairlines and surface tints
• Outline “ghost” CTAs on the dark hero — 1px translucent-white border, 14px radius, no fill
• Cool near-black inks (#0e1420, #1b2230) instead of pure black for extended reading text

Primary tasks

• Read the third-party media coverage before trusting the firm
• Check who backs the company before evaluating its strategies
• Discover which investment businesses the company actually runs
• Explore open engineering roles before applying to work there
• Check the global office footprint before opening a partnership conversation

Brand Narrative

Qraft Technologies (크래프트테크놀로지스) was founded in 2016 and is a Seoul-headquartered AI-fintech company building quantitative investment products powered by machine learning. Its stated purpose — captured in the homepage thesis “Transforming Investing with AI” — is to replace human discretionary bias in asset management with data-driven, AI-managed strategies: AI-enhanced ETFs, an AI hedge fund, and market-intelligence and order-execution engines. The About page describes the firm as running on “large-scale data pipelines and a high-performance” research infrastructure, positioning it as an engineering company operating inside financial markets rather than a traditional asset manager adopting software.

The credibility spine of the narrative is external and evidentiary. The homepage foregrounds that Qraft is backed by SoftBank Group — a 2019 US$146M investment — and dedicates a “News Coverages” section to being “featured in leading global media”, citing outlets such as Barron’s. The brand builds trust the way a research house does: through named investors, media citations, and performance references, not through consumer-facing promises.

What Qraft’s design refuses is the visual language of retail finance — no green up-arrows, no celebratory gradients, no gamified urgency. What it embraces is institutional restraint: a black-and-monochrome canvas, neutral grotesque type (Inter and Helvetica Neue), flat hairline-separated layouts, and a single disciplined royal-blue accent. The aesthetic signals that the product is infrastructure for serious capital, engineered and evidence-led.

(Company facts — 2016 founding, Seoul HQ, SoftBank backing, AI-quant product lines — are drawn from the live homepage and About page inspected 2026-07-02; see .verification.md.)

Principles

1. Evidence over enthusiasm. Qraft persuades with citations, named backers, and performance, not adjectives. UI implication: give press coverage and data real estate; keep marketing copy factual and mechanism-first.
2. Monochrome discipline, one accent. The identity is black, white, and grey with a single royal blue. UI implication: reserve #1033d4 for one highlight per view; let type weight, not color, carry emphasis.
3. Flat, like a tear sheet. Depth is background swaps and hairlines, never shadow. UI implication: separate sections with full-bleed color changes and #0f1218-alpha borders; avoid card elevation.
4. Engineered, not decorated. Neutral grotesques and sparse layouts read as engineering rigor. UI implication: prefer Inter/Helvetica Neue, tight leading, and empty space over illustration or ornament.
5. Institutional, global posture. Seoul HQ with global offices, SoftBank-backed. UI implication: copy and structure should read for an allocator/partner audience — credible, calm, internationally framed.

Personas

Personas below are fictional archetypes informed by publicly observable Qraft audience segments (institutional allocators, ETF/asset-management partners, quant-finance engineers), not individual people.

서지훈, 41, 서울. A pension-fund portfolio strategist evaluating AI-managed ETF exposure. Distrusts marketing and reads the “News Coverages” and performance sections first. Trusts Qraft because the tone is evidentiary and the backers (SoftBank) are named — it reads like a research house, not a fintech app.

Kenji Watanabe, 38, Tokyo. A partnerships lead at a Japanese asset manager exploring Qraft’s execution/market-intelligence engine. Values the global-office footprint and the calm, institutional presentation; would be put off by any retail-hype urgency.

Dana Cho, 29, Seoul. A quant-finance engineer considering a role at Qraft. Reads the black, engineered aesthetic as a signal of technical seriousness. Cares that the company frames itself as data-pipeline infrastructure, and browses the GitHub org before applying.

Colors

Primary / Brand

• Qraft Royal Blue (#1033d4): The single saturated brand accent, applied to the “Qraft Capital” wordmark highlight at weight 600. The system’s one true color.
• Accent Blue (#2f67d6): Tint base for milestone/category chips on the About page (used at ~10-18% alpha over light surfaces).
• Accent Blue Text (#234a93): The deeper blue used for label text sitting inside the blue-tint chips.

Neutral / Ink

• Black (#000000): The hero canvas and the default text color of the underlying chassis.
• Ink (#0e1420): Cool near-black used for About-page body headings and strong labels — the primary reading ink on light sections.
• Ink Hairline (#0f1218): The hairline/overlay base color — borders and dividers are this hue at low alpha (rgba(15,18,24,0.1)).
• Quote Navy (#1b2230): Slightly warmer near-black for news-quote body copy and card text.
• Body Ink (#252525): The About-page lead paragraph text color (rendered at ~90% alpha).
• Slate (#5d6573): Muted secondary text and metadata on light surfaces.

Surface

• Canvas (#ffffff): Light-section background, card surfaces, and text on dark/blue.
• Dark Surface (#0b0e14): The near-black secondary surface used for dark content bands beneath the hero.
• Cream (#fbfaf7): Warm off-white background for the news-coverage cards.
• Surface (#f5f5f5): Neutral light-grey panel surface on the About page.
• Surface Alt (#e8eaed): Cooler light grey for the global-offices map / data panels.
• Grey (#d9d9d9): Footer text, the skip-to-content pill, and thin divider borders.

Accent (secondary)

• Amber (#ffaf2a): Tint base for the second milestone-chip category on the About page (low alpha).
• Amber Text (#7a4600): The brown-amber label text inside the amber-tint chips.
• On Primary (#ffffff): White text placed on the royal-blue and dark surfaces.

Typography

Font Family

• Display: Inter (with system-ui, -apple-system fallbacks) — the hero headlines, eyebrow labels, body leads, and CTA labels.
• Heading: Helvetica Neue (with Arial fallback) — section titles, sub-heads, and captions.
• Body: Arial (Helvetica / sans-serif fallback) — navigation links, quote body copy, and footer text, inherited from the Squarespace chassis.

Hierarchy

Principles

• Weight, not color, is the emphasis lever: 600 for the hero, 500 for headings, 400 for everything informational. The monochrome palette forces hierarchy into the type weight.
• Two grotesques, split by job: Inter is the modern display/brand voice; Helvetica Neue is the neutral institutional heading voice. Arial is the utilitarian body inherited from the chassis. They do not swap roles.
• Tight display leading: the 87px hero runs at ~1.28 line-height with a faint positive tracking (+0.87px) — dense and monumental rather than airy.
• Near-black inks for reading: extended copy uses cool near-blacks (#0e1420, #1b2230) rather than pure #000000, which is reserved for the hero canvas and short labels.

Layout

Spacing System

• Base unit: ~4px, stepping 4 / 8 / 14 / 16 / 18 / 32 / 48px with large ~80px section gaps
• Notable: the hero CTA lands at 14px 18px padding on a 60px pill; news cards use a tight 14px inset
• Sections breathe vertically — generous whitespace between the black hero and the white content bands

Grid & Container

• Centered single-column hero anchored by the 87px Inter headline over black
• News coverage arranged as a grid of cream (#fbfaf7) cards with hairline borders
• About page alternates a black hero, a white body-lead band, and light-grey (#f5f5f5) milestone/office panels
• Global-offices section uses a cool grey (#e8eaed) map/data surface

Whitespace Philosophy

• Institutional restraint: emptiness is the point — a black hero with one line of type reads as confidence, not as an unfinished page.
• Flat segmentation: sections separate by full-bleed background swaps (black → white → light grey), not by shadow or heavy rules.
• Card rhythm: repeated 16px-radius cream cards give the news section a calm, consistent cadence.

Border Radius Scale

• Extra-small (2px): form fields, fine inner elements
• Medium (14px): hero ghost CTAs
• Card (16px): news / coverage cards
• Large (22px): panel containers
• Full (999px / 300px): skip pill, milestone chips, avatars

Responsive Behavior

Breakpoints

Touch Targets

• Hero ghost CTA at 60px height with 14px 18px padding — a comfortable tap target
• Nav links sit in a generously spaced top bar
• Milestone chips are full-round (999px) with adequate horizontal padding

Collapsing Strategy

• Hero: the 87px Inter headline scales down substantially on mobile; weight 600 is preserved
• News grid: multi-column cream cards → 2-up → single stacked column
• Black hero and light content bands maintain full-width, full-bleed treatment
• Global-offices map/data panel reflows to a stacked list on narrow viewports

Image Behavior

• Media logos and press thumbnails carry no shadow at any size, consistent with the flat system
• Cards maintain their 16px radius across breakpoints
• The black hero keeps its full-bleed dark treatment on all screen sizes

Elevation & Depth

Shadow Philosophy: Qraft is a near-shadowless, flat system. Live inspection returned box-shadow: none across the hero, navigation, headings, and news cards. Depth and grouping are communicated entirely through full-bleed background swaps (black #000000 → white #ffffff → cream #fbfaf7 / grey #f5f5f5) and thin #0f1218-alpha hairlines. This flat treatment reinforces the institutional-research tone: the interface reads like a printed tear sheet, not a stack of floating consumer cards. When the system needs emphasis it reaches for the royal blue (#1033d4) or a tinted chip, never elevation.

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 restrained and functional, matching the institutional tone. The hero and section content fade/slide up subtly at motion-standard / ease-enter; ghost CTAs shift border and background opacity on hover at motion-fast. No bounce, spring, or overshoot — a quantitative-investing brand signals steadiness, not playfulness. Under prefers-reduced-motion: reduce, all transitions collapse to instant; the interface remains fully functional.

<!– OmD v0.1 Sources — Philosophy Layer (sections 10–15)

Tier 1 live inspect (2026-07-02) via playwright getComputedStyle on and

• Hero H1 “Transforming Investing with AI” — Inter 86.67px / 600 / +0.87px / rgb(255,255,255) on black
• Hero H2 “Founded in 2016 and backed by SoftBank Group” — Helvetica Neue 23.4px / 500 / white
• “News Coverages” / “Milestone” section H1 — Helvetica Neue 51.96px / 500 / rgb(0,0,0)
• “We have been featured in leading global media” — H3 Helvetica Neue 28.44px / 500
• Ghost CTA “Learn More” — bg rgba(255,255,255,0.02) / border 1px rgba(255,255,255,0.55) / radius 14px / Inter 16px/500 / 60px
• News card (Barron’s) — bg rgb(251,250,247) #fbfaf7 / border 1px rgba(15,18,24,0.1) / radius 16px
• “Qraft Capital” highlight — color rgb(16,51,212) #1033d4 / weight 600
• About body “Qraft Technologies is a Seoul-headquartered…” — Inter 20px / rgba(37,37,37,0.9)
• About milestone chips — blue rgba(47,103,214,0.1) / text rgb(35,74,147) #234a93; amber rgba(255,175,42,0.12) / text rgb(122,70,0) #7a4600
• box-shadow: none across hero/nav/headings/cards (flat system)

Voice samples (§10) are verbatim from the live homepage (hero H1, hero H2, news head).

Brand narrative (§11): 2016 founding, Seoul HQ, SoftBank Group backing, and the AI-quant product lines (AI-enhanced ETFs, AI hedge fund, market-intelligence & execution) are drawn from the live homepage and About page inspected this turn. Specific figures beyond what the pages state are general public knowledge, not directly quoted from a verified Qraft statement.

Personas (§13) are fictional archetypes informed by publicly observable Qraft audience segments (institutional allocators, asset-management partners, quant engineers). Names are illustrative; they do not refer to real people.

Interpretive claims (e.g., “flat, like a tear sheet”, “evidence over enthusiasm”) are editorial readings connecting Qraft’s observed design to its institutional positioning, not directly sourced Qraft statements. –>

Components

Buttons

Ghost CTA (Hero)

• Background: transparent (rgba(255,255,255,0.02))
• Text: #ffffff
• Border: 1px solid rgba(255,255,255,0.55)
• Radius: 14px
• Padding: 14px 18px
• Height: 60px
• Font: 16px / 500 / Inter
• Use: Primary hero call-to-action — “Learn More”, “Explore roles”, “Discover our Businesses”

Skip-to-Content Pill

• Background: #d9d9d9
• Text: #000000
• Border: 2px solid #d9d9d9
• Radius: 300px
• Padding: 16px 0
• Font: 13px / 500 / Helvetica Neue
• Use: Accessibility skip link, rendered as a full-round grey pill

Inputs & Forms

• Background: #ffffff
• Border: 1px solid #d9d9d9
• Radius: 2px
• Text: #0e1420
• Use: Contact / careers form fields on light sections (minimal, hairline-bordered)

Cards & Containers

News-Coverage Card

• Background: #fbfaf7
• Text: #1b2230
• Border: 1px solid rgba(15,18,24,0.1)
• Radius: 16px
• Padding: 14px
• Use: Media / press-coverage card on the light news section (Barron’s, media quotes)

Panel Surface

• Background: #f5f5f5
• Text: #0e1420
• Radius: 22px
• Use: Data / milestone panel container on the About page

Badges

Milestone Chip (Blue)

• Background: rgba(47,103,214,0.1)
• Text: #234a93
• Radius: 999px
• Font: 14px / 600
• Use: Blue-tint milestone / category chip on the About page

Milestone Chip (Amber)

• Background: rgba(255,175,42,0.12)
• Text: #7a4600
• Radius: 999px
• Font: 14px / 600
• Use: Amber-tint secondary milestone chip on the About page

Navigation

• Background: transparent over black hero, #ffffff on scrolled light sections
• Text: #ffffff on dark, #d9d9d9 on light
• Font: 17px / 400 / Arial
• Active: text shifts to #d9d9d9 on the scrolled header
• Use: Top navigation — “About Us”, “Businesses”, “News”, “Careers”

Footer

• Background: #000000
• Links: #d9d9d9, 13px / 700 / Arial
• Use: Footer chrome — “Privacy Policies”, “개인정보 처리방침”, “View Our Global Offices”, “© 2026 Qraft Technologies, Inc.”

States

Do’s and Don’ts

Do

• Open on a pure black (#000000) canvas with a single large Inter/600 white headline
• Use Helvetica Neue at 52px/500 for section titles and Inter for the display hero
• Let weight (600 → 500 → 400) carry hierarchy — the palette stays near-monochrome
• Reserve royal blue (#1033d4) as the single saturated brand accent
• Use tinted chips — blue (#2f67d6 / #234a93) and amber (#ffaf2a / #7a4600) — for milestone categories
• Keep depth flat: separate with background swaps and #0f1218-alpha hairlines, never drop shadows
• Use cream (#fbfaf7) cards with 16px radius for news / press coverage
• Use cool near-black inks (#0e1420, #1b2230) for extended reading text

Don’t

• Add gradients, glows, or illustration to the hero — the black-and-type sparseness is the identity
• Spread the royal blue across many elements — it is a single-highlight accent, not a UI fill
• Introduce drop shadows for elevation — Qraft is a flat, hairline-separated system
• Set body reading text in pure #000000 — use #0e1420 / #1b2230 near-blacks
• Use a light or thin weight for the hero — the display headline is always Inter 600
• Mix in a third saturated hue — blue and the amber tint are the only chromatic accents
• Use heavy fills or bright buttons on the dark hero — CTAs are 1px translucent-white ghost outlines
• Swap the type roles — Inter is display, Helvetica Neue is headings, Arial is utilitarian body

Voice & Tone

Qraft’s voice is precise, institutional, and quietly ambitious — the register of a quantitative research desk, not a retail investing app. The hero states a thesis, not a slogan: “Transforming Investing with AI”, immediately grounded by a factual support line (“Founded in 2016 and backed by SoftBank Group”). Copy leans on evidence — media citations, performance references, named investors — rather than hype. It treats the reader as an institutional allocator or sophisticated partner who wants proof, provenance, and mechanism, not excitement.

Voice samples (verbatim from live site, 2026-07-02):

• “Transforming Investing with AI” — hero headline (thesis-framed). (verified live 2026-07-02)
• “Founded in 2016 and backed by SoftBank Group” — hero support line (credentialing). (verified live 2026-07-02)
• “We have been featured in leading global media” — news section head (third-party proof). (verified live 2026-07-02)

Forbidden register: retail-hype urgency (“get rich”, “beat the market”), exclamation-heavy marketing, undefined buzzwords without mechanism, and any tone that undersells the institutional/research posture.

Agent Prompt Guide

Quick Color Reference

• Brand accent: Qraft Royal Blue (#1033d4)
• Blue chip tint / text: #2f67d6 / #234a93
• Amber chip tint / text: #ffaf2a / #7a4600
• Hero canvas / primary text: Black (#000000)
• Light canvas / on-dark text: White (#ffffff)
• Reading ink: #0e1420 / #1b2230
• Muted text: Slate (#5d6573)
• Cream card: #fbfaf7
• Panel surfaces: #f5f5f5 / #e8eaed
• Grey chrome / hairline base: #d9d9d9 / #0f1218

Example Component Prompts

• “Create a hero on a pure black (#000000) background. Single headline at 87px Inter weight 600, line-height 1.28, letter-spacing +0.87px, color #ffffff — ‘Transforming Investing with AI’. Below it a 23px Helvetica Neue 500 support line in white. One ghost CTA: transparent fill, 1px solid rgba(255,255,255,0.55) border, #ffffff text, 14px radius, 14px 18px padding — ‘Learn More’.”
• “Design a news-coverage card: cream #fbfaf7 background, 1px solid rgba(15,18,24,0.1) hairline, 16px radius, 14px padding, no shadow. Quote text 15px Arial weight 400, color #1b2230.”
• “Build a milestone chip row: full-round 999px chips. Blue variant — rgba(47,103,214,0.1) background, #234a93 text, 14px weight 600. Amber variant — rgba(255,175,42,0.12) background, #7a4600 text.”
• “Create a section title in Helvetica Neue at 52px weight 500, color #0e1420 on a white background, with a light-grey #f5f5f5 panel (22px radius) beneath it.”

Iteration Guide

1. Start black-and-monochrome; let type weight (600 → 500 → 400) carry the hierarchy
2. Inter for the display hero, Helvetica Neue for section titles, Arial for body/nav
3. Royal blue (#1033d4) is the single accent — do not spread it
4. No shadows — separate with background swaps and #0f1218-alpha hairlines
5. Cream (#fbfaf7) 16px cards for news; light-grey (#f5f5f5 / #e8eaed) panels for data
6. Ghost outline CTAs on dark; near-black inks (#0e1420, #1b2230) for reading text
7. Milestone chips are full-round with blue or amber tints

Governance

Known Gaps

• Contrast, milestone-tag-blue. Text #234a93 on #2f67d61a measures 1.63:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, milestone-tag-amber. Text #7a4600 on #ffaf2a1f measures 4.22:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.