Design System Inspiration of Qraft Technologies
1. 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
2. Color Palette & Roles
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.
3. Typography Rules
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
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|
| Hero | Inter | 87px (86.67 measured) | 600 | 1.28 (110.66px) | +0.87px | "Transforming Investing with AI" |
| Section Title | Helvetica Neue | 52px (51.96) | 500 | 1.28 (66.34px) | normal | "News Coverages", "Milestone" |
| Sub-section | Helvetica Neue | 28px (28.44) | 500 | 1.36 (38.54px) | normal | "Qraft Around the Globe" |
| Sub-head (H2) | Helvetica Neue | 23px (23.4) | 500 | 1.37 (32.1px) | normal | Hero support sentence |
| Body Lead | Inter | 20px | 400 | 1.5 | normal | About-page lead paragraph |
| Eyebrow | Inter | 18px | 400 | normal | +1.44px | Wide-tracked section label |
| Nav | Arial | 17px (16.68) | 400 | 1.8 | normal | Top navigation items |
| Button | Inter | 16px | 500 | 1.88 | normal | CTA label |
| Body | Arial | 15px (15.15) | 400 | 1.52 (23px) | normal | News-quote body text |
| Caption | Helvetica Neue | 13px (13.27) | 500 | normal | +0.27px | Skip link, footer text |
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.
4. Component Stylings
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."
Verified: 2026-07-02
Tier 1 sources: https://www.qraftec.com/ (homepage, live computed style), https://www.qraftec.com/about-us (About page, live computed style — blue/amber tint chips), https://github.com/qraft-technologies (official GitHub org)
Tier 2 sources: getdesign.md/qraft — "No designs found for 'qraft'" (not listed); styles.refero.design/?q=qraft — no brand-specific entry (default gallery returned)
Conflicts unresolved: none
5. Layout Principles
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
6. Depth & Elevation
| Level | Treatment | Use |
|---|
| Flat (Level 0) | No shadow | Hero, nav, headings, most surfaces |
| Tint (Level 1) | Background swap (#fbfaf7 / #f5f5f5 / #e8eaed) | Section/card separation without elevation |
| Hairline (Level 2) | 1px solid rgba(15,18,24,0.1) (i.e. #0f1218 @ 10%) | News-card and panel outlines, dividers |
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.
7. 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
8. Responsive Behavior
Breakpoints
| Name | Width | Key Changes |
|---|
| Mobile | <640px | Single column; hero headline compresses well below 87px; cards stack |
| Tablet | 640-1024px | Moderate padding; news cards go 2-up |
| Desktop | 1024-1440px | Full layout; centered hero; multi-column news / office grids |
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
9. 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
- Start black-and-monochrome; let type weight (600 → 500 → 400) carry the hierarchy
- Inter for the display hero, Helvetica Neue for section titles, Arial for body/nav
- Royal blue (
#1033d4) is the single accent — do not spread it
- No shadows — separate with background swaps and
#0f1218-alpha hairlines
- Cream (
#fbfaf7) 16px cards for news; light-grey (#f5f5f5 / #e8eaed) panels for data
- Ghost outline CTAs on dark; near-black inks (
#0e1420, #1b2230) for reading text
- Milestone chips are full-round with blue or amber tints
10. 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.
| Context | Tone |
|---|
| Hero headline | Thesis-declarative. "Transforming Investing with AI." Ambitious but not superlative. |
| Support / eyebrow lines | Factual and credentialing. "Founded in 2016 and backed by SoftBank Group." |
| Business descriptions | Mechanism-first. "AI-Enhanced Quantitative Investment Solutions", "Market Intelligence & Execution". |
| News / coverage | Third-party evidence, cited verbatim. Media quotes carry the persuasion. |
| CTAs | Understated and exploratory. "Learn More", "Discover our Businesses", "Explore roles". |
| Careers / About | Confident, globally framed (Seoul HQ, Tokyo / global offices), mission-anchored. |
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.
11. 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.)
12. Principles
- 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.
- 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.
- 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.
- 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.
- 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.
13. 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.
14. States
| State | Treatment |
|---|
| Empty (no coverage / no results) | White canvas, a single #0e1420 line explaining nothing to show yet, with one royal-blue (#1033d4) link to related content. No illustration. |
| Empty (list, none saved) | Slate (#5d6573) single line stating the list is empty, plus a calm path back. Understated. |
| Loading (content fetch) | Flat skeleton blocks on #f5f5f5 at final card dimensions, 16px radius. No shadow shimmer — a quiet pulse consistent with the flat system. |
| Loading (in-place refresh) | Existing content stays visible; a thin #1033d4 progress hint appears rather than blocking the view. |
| Error (fetch failed) | Inline message in #0e1420 with a plain-language explanation and a retry link. No generic error alone; state what to do next. |
| Error (form validation) | Field-level message below the input; describes what is valid, not just "required". |
| Success (form submitted) | Brief inline confirmation in a calm tone; next-step detail linked immediately below. No celebratory emoji. |
| Skeleton | #f5f5f5 / #e8eaed blocks at final dimensions, 16px radius, flat pulse. |
| Disabled | Grey (#d9d9d9) text on a reduced-opacity surface; the royal-blue accent fades rather than switching to a different hue. |
15. Motion & Easing
Durations:
| Token | Value | Use |
|---|
motion-fast | 120ms | Hover, focus, link underline |
motion-standard | 220ms | Nav reveal, card/section fade-in, dropdown |
motion-slow | 360ms | Hero reveal, page-level transitions |
Easings:
| Token | Curve | Use |
|---|
ease-enter | cubic-bezier(0.2, 0.6, 0.25, 1) | Arriving — sections, cards, nav |
ease-exit | cubic-bezier(0.4, 0.0, 1, 1) | Dismissals |
ease-standard | cubic-bezier(0.25, 0.1, 0.25, 1) | Two-way transitions |
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.