Design System Inspiration of FriendliAI

1. Visual Theme & Atmosphere

FriendliAI (프렌들리에이아이) is a Korean AI-infrastructure company whose homepage presents itself as "The Frontier AI Inference Cloud" — and the design reads exactly like that positioning: technical, exact, and quietly confident, the visual language of a systems company that sells throughput and reliability to engineers. The canvas is not pure white but a soft cool-grey (#f7f8fa) that keeps large marketing surfaces calm and screen-friendly, with white (#ffffff) reserved for the cards and panels that carry content. Text sits in a deep near-black navy (#0a101a) rather than true black for body, giving the page an engineered, blue-cool temperature that matches the product domain — GPUs, tokens, and latency graphs.

The single saturated brand color is a decisive royal blue: the primary "Get started" CTA fills with #2a62db, while inline links run a marginally deeper, more legible blue (#2453ba) that appears hundreds of times across the body copy. A brighter electric blue (#0095ff) is held in reserve for the top announcement banner and accent graphics, so the palette climbs in energy from the muted body text up to the loud "ship-now" banner. The rest of the system is a disciplined cool-grey ladder — dark slate (#243b53), deep navy (#102a43), muted slate (#486581), a mid slate (#537696), a neutral grey (#6e7a84), and a faint grey (#a7adb2) — that handles every level of secondary text and dark section.

What distinguishes FriendliAI typographically is its use of Saans, a contemporary grotesk deployed as a variable font at unusually precise weights: the hero headline runs at weight 650 (between SemiBold and Bold), subheads at 530, and CTA labels at 530 — not the default 400/500/600/700 rungs most sites reach for. This micro-tuned weight scale is the brand's typographic signature: it reads as engineered rather than decorated. Depth is minimal — most separation comes from #d9e2ec hairlines and the cool-grey canvas — but the system does keep one dramatic elevation for spotlight cards (a soft rgba(0,0,0,0.25) 0px 0px 35px ambient glow). Geometry is split: sharp 4px radii on buttons, generous 32px radii on feature cards, and full 360px pills on tags and the search field.

Key Characteristics:

• Saans grotesk at micro-tuned variable weights — hero at 650, subhead/buttons at 530, not the usual 400/600/700 rungs
• Royal-blue action color (#2a62db) for CTAs, deeper blue (#2453ba) for inline links
• Cool-grey canvas (#f7f8fa) with white (#ffffff) cards — never a stark white page
• Near-black navy (#0a101a) body text instead of pure black, for an engineered cool temperature
• Bright electric blue (#0095ff) reserved for the top announcement banner and accents
• Disciplined cool-grey text ladder: #243b53 → #486581 → #537696 → #6e7a84 → #a7adb2
• Split geometry — 4px button corners, 32px card corners, 360px full pills for tags/search
• Mostly flat: #d9e2ec hairlines carry separation, with one soft ambient glow for spotlight cards

2. Color Palette & Roles

Primary & Action

• Friendli Blue (#2a62db): Primary brand and action color. Fills the "Get started" CTA — the system's single primary action.
• Link Blue (#2453ba): The inline link and active-nav color; a slightly deeper, more legible blue than the CTA. The most frequent non-neutral color in body copy.
• Electric Blue (#0095ff): A brighter accent held for the top announcement banner ("GLM-5.2 is live…") and highlight graphics.

Ink & Dark

• Ink Navy (#0a101a): Primary text and heading color; a near-black navy used instead of pure black. Also the fill of the dark HIGHLIGHTS badge.
• Dark Slate (#243b53): Dark-section background and the text color of white topic-tag pills.
• Deep Navy (#102a43): The darkest section background, for immersive brand blocks.
• Pure Black (#000000): Occasional maximum-contrast label (e.g. the secondary "Talk to an engineer" button text).

Neutral & Text Ladder

• Muted Slate (#486581): Hero subheadline and secondary headings.
• Mid Slate (#537696): Lower-emphasis links such as "Log in".
• Grey (#6e7a84): Tertiary body text and metadata.
• Faint Grey (#a7adb2): Lowest-emphasis labels, disabled text, placeholders.

Surface & Border

• Canvas Grey (#f7f8fa): The default page background — a cool near-white that keeps marketing surfaces calm.
• Pure White (#ffffff): Cards, panels, buttons, and text on blue/dark.
• Hairline (#d9e2ec): The primary separation device — card borders, the search-input outline, dividers.
• Hairline Soft (#e5ebf2): A lighter hairline used on inline links and subtle borders.
• On-Primary (#ffffff): Text/icon color on the blue CTA and dark badges.

3. Typography Rules

Font Family

• Sans: Saans (served as SaansLocalFont with a local fallback) — used for every text element, from hero to nav to body. FriendliAI does not split display and body across two families; Saans carries the whole system.

Hierarchy

Principles

• Micro-tuned variable weights: The signature choice. Saans runs at 650 for the hero, 530 for subheads and buttons, 600 for blog titles — precise interpolations rather than the default 400/500/600/700 rungs. The weight scale itself signals engineering rigor.
• One family, all roles: Saans covers display, nav, body, and UI. Hierarchy is built from size and variable weight, not from swapping typefaces.
• Cool near-black body: Body text is #0a101a navy, not pure black — the same cool temperature as the product's data-heavy surfaces.
• Comfortable body rhythm: Body sits at 16px with a generous 1.55 line-height (24.8px), keeping long technical paragraphs readable.

4. Component Stylings

Buttons

Get Started (Primary)

• Background: #2a62db
• Text: #ffffff
• Radius: 4px
• Padding: 0px 12px
• Height: 32px
• Font: 14px Saans weight 530
• Use: Header and hero primary CTA — the system's single primary action

Talk to an Engineer (Secondary)

• Background: #ffffff
• Text: #000000
• Radius: 4px
• Padding: 0px 12px
• Height: 32px
• Font: 14px Saans weight 530
• Use: Secondary header CTA, sitting beside the primary blue button

Log in (Quiet)

• Text: #537696
• Radius: 4px
• Padding: 0px 4px
• Height: 32px
• Font: 14px Saans weight 530
• Use: Lowest-emphasis text link in the header

Inputs & Forms

Search (Pill)

• Background: #ffffff
• Border: 1px solid #d9e2ec
• Radius: 360px
• Padding: 9px 40px
• Font: 14px Saans
• Use: Blog search field — a full-pill input with a leading search icon ("Search blogs")

Cards & Containers

Feature Card

• Background: #ffffff
• Border: 1px solid #d9e2ec
• Radius: 32px
• Padding: 32px
• Use: Feature card in the homepage grid — large rounded corners, hairline border, no shadow

Elevated Spotlight Card

• Background: #ffffff
• Radius: 5px
• Padding: 30px
• Shadow: rgba(0,0,0,0.25) 0px 0px 35px 0px
• Use: A single elevated card with a soft ambient glow, used to spotlight a headline result

Badges

Topic Tag Pill

• Background: #ffffff
• Text: #243b53
• Border: 1px solid #d9e2ec
• Radius: 360px
• Padding: 4px 12px
• Font: 13px Saans weight 500
• Use: Blog topic tags ("GLM-5.2", "Inference", "NVIDIA")

HIGHLIGHTS Badge

• Background: #0a101a
• Text: #ffffff
• Radius: 360px
• Padding: 4px 12px
• Font: 14px Saans weight 500
• Use: Dark section label on the blog ("HIGHLIGHTS")

Navigation

• Background: #ffffff
• Text: #0a101a
• Font: 15px Saans weight 500
• Active: link blue #2453ba
• Use: Top horizontal nav ("Product", "Solutions", "Models", "Developers", "Customers", "Company", "Pricing")

---

Verified: 2026-07-02 (omd:add-reference CREATE — Tier 1 live inspect, 2 surfaces) Tier 1 sources: https://friendli.ai/, https://friendli.ai/blog, https://docs.friendli.ai/guides/intro Tier 2 sources: getdesign.md/friendliai — 0 DESIGN.md files (no entry); styles.refero.design/?q=friendli — no FriendliAI match (default browse grid returned) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: 4px
• Scale: 4px, 8px, 12px, 16px, 24px, 30px, 32px, 48px
• Notable: Card padding lands at a generous 32px; buttons stay compact at 0px 12px horizontal for a tight, dense header

Grid & Container

• Centered single-column hero with the 56px Saans headline as the anchor, muted subhead beneath
• Feature sections use a multi-column grid of 32px-radius white cards on the grey canvas
• A sticky top announcement banner (#0095ff) rides above the nav for launch news
• Dark immersive sections use #102a43 / #243b53 backgrounds with white text

Whitespace Philosophy

• Calm canvas, contained content: The cool-grey (#f7f8fa) canvas keeps the page quiet; content is pulled into white cards so data and copy sit on clean surfaces.
• Hairline separation: Sections and cards separate with #d9e2ec hairlines rather than heavy shadow, keeping the system flat and fast.
• One glow, used sparingly: The single ambient rgba(0,0,0,0.25) 0px 0px 35px shadow appears only on a spotlight card, so elevation reads as intentional emphasis.

Border Radius Scale

• Small (4px): buttons, quiet links
• Medium (8px): inline chrome, small containers
• Large (12px): mid-size panels
• Extra-large (32px): feature cards — the distinctive soft-cornered block
• Full (360px): tag pills, the search input, round chips

6. Depth & Elevation

Shadow Philosophy: FriendliAI is a near-flat system. Nav, hero, feature cards, and tags carry no shadow; grouping is done with the cool-grey canvas (#f7f8fa) and #d9e2ec hairlines. The one exception is a symmetric ambient glow (rgba(0,0,0,0.25) 0px 0px 35px 0px) reserved for a single spotlight card, so elevation is a deliberate signal of "look here" rather than a default decoration. This restraint reads as engineered — depth is a tool, not a texture.

7. Do's and Don'ts

Do

• Use Saans at its micro-tuned variable weights (650 hero, 530 subhead/buttons, 600 blog titles) — the precise weight scale is the brand voice
• Reserve #2a62db for the primary CTA and #2453ba for inline links — keep blue as the single action/interaction color
• Set body and headings in near-black navy (#0a101a), not pure black
• Sit content on white (#ffffff) cards over the cool-grey (#f7f8fa) canvas
• Separate cards and sections with #d9e2ec hairlines, not shadows
• Use 32px radii on feature cards and 360px pills on tags and the search field
• Hold the bright electric blue (#0095ff) for the announcement banner and accents only
• Keep buttons compact (32px height, 4px radius, 0px 12px padding) for a dense, engineered header

Don't

• Reach for the default 400/600/700 weight rungs — Saans is tuned to 530/650, and generic weights break the signature
• Spread blue across many elements — it dilutes the single-action signal
• Use pure black (#000000) for body text — reserve near-black navy #0a101a (black is only the secondary-button label)
• Stack heavy drop shadows on cards — the system is flat, with one intentional ambient glow
• Put the whole page on stark white — the cool-grey #f7f8fa canvas is the base
• Use sharp square corners on tags or the search field — those are full pills
• Mix in a second saturated hue — the blues are the only accents on the neutral ladder

8. Responsive Behavior

Breakpoints

Touch Targets

• Primary/secondary buttons at 32px height with 12px horizontal padding
• Tag pills and the search input use full 360px radius for clear, tappable shapes
• Nav items spaced within a comfortable header band

Collapsing Strategy

• Hero: 56px Saans headline scales down on mobile; weight 650 maintained
• Feature cards: multi-column grid → 2-up → single stacked column, 32px radius preserved
• Announcement banner: full-width #0095ff bar persists, text truncates
• Dark sections: maintain full-width #102a43 / #243b53 treatment, reduce internal padding

Image Behavior

• Product/architecture diagrams sit inside white cards with hairline borders
• Cards maintain 32px radius across breakpoints
• The spotlight card keeps its ambient glow at all sizes

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: Friendli Blue (#2a62db)
• Inline link / active nav: Link Blue (#2453ba)
• Announcement / accent: Electric Blue (#0095ff)
• Heading / body text: Ink Navy (#0a101a)
• Dark section: Deep Navy (#102a43) / Dark Slate (#243b53)
• Subhead / secondary text: Muted Slate (#486581)
• Quiet link: Mid Slate (#537696)
• Tertiary text: Grey (#6e7a84)
• Faint / disabled: Faint Grey (#a7adb2)
• Canvas: Canvas Grey (#f7f8fa)
• Card / surface: Pure White (#ffffff)
• Border: Hairline (#d9e2ec), Hairline Soft (#e5ebf2)
• Secondary-button label: Pure Black (#000000)

Example Component Prompts

• "Create a hero on a #f7f8fa canvas. Headline at 56px Saans weight 650, line-height 1.10, color #0a101a. Subhead at 22px weight 530, color #486581. Primary CTA: #2a62db background, white text, 4px radius, 32px height, 0px 12px padding, 14px weight 530 — 'Get started'. Beside it a white secondary button (#ffffff bg, #000000 text, 4px radius) — 'Talk to an engineer'."
• "Design a feature card: white #ffffff background, 1px solid #d9e2ec border, 32px radius, 32px padding, no shadow. Title in #0a101a, body in #6e7a84."
• "Build a topic tag pill: white background, #243b53 text, 1px solid #d9e2ec border, 360px radius, 4px 12px padding, 13px Saans weight 500."
• "Create a top nav on white: Saans 15px weight 500 items in #0a101a, active item in link blue #2453ba. Right-aligned #2a62db 'Get started' pill-adjacent button."

Iteration Guide

1. Saans everywhere; hero at weight 650, subheads/buttons at 530, blog titles at 600
2. #2a62db is the CTA, #2453ba is the link — keep blue as the single interaction color
3. Content on white #ffffff cards over the #f7f8fa grey canvas
4. Separate with #d9e2ec hairlines; reserve the one rgba(0,0,0,0.25) 0px 0px 35px glow for a spotlight card
5. Split geometry: 4px buttons, 32px feature cards, 360px pills
6. Body/heading text is #0a101a navy, never pure black
7. Hold #0095ff for the announcement banner and accents only

---

10. Voice & Tone

FriendliAI's voice is precise, benchmark-driven, and developer-first — the register of an infrastructure company that competes on measurable performance (throughput, latency, cost) and lets the numbers do the persuading. The hero line "The Frontier AI Inference Cloud" is declarative and category-claiming, not hypey; the supporting line "Inference performance drives profitability" frames the pitch in a business outcome an engineer can defend to finance. Announcements are concrete and comparative ("GLM-5.2 is live. #1 throughput on OpenRouter"), naming the exact model and the exact metric rather than reaching for adjectives.

Voice samples (verbatim from live surfaces):

• "The Frontier AI Inference Cloud" — hero H1 (category claim). (verified live 2026-07-02, friendli.ai)
• "Inference performance drives profitability" — hero subhead (business framing). (verified live 2026-07-02, friendli.ai)
• "GLM-5.2 is live. #1 throughput on OpenRouter" — announcement banner (concrete, comparative). (verified live 2026-07-02, friendli.ai)
• "Talk to an engineer" — secondary CTA (developer-first, not "Book a demo"). (verified live 2026-07-02, friendli.ai)

Forbidden register: vague hype ("revolutionary", "game-changing"), unquantified performance claims, consumer-app exclamation, sales-gated basic functionality ("Request a demo" in place of "Get started"), stacked adjectives on capabilities.

11. Brand Narrative

FriendliAI (프렌들리에이아이) is a Korean AI-infrastructure company built around a single problem: serving generative-AI models in production is slow and expensive, and the cost of inference — not training — is what determines whether an AI product is viable at scale. The company's answer is an inference cloud engineered for throughput and cost-efficiency, offered as dedicated endpoints, serverless endpoints, and self-hosted containers, so teams can run open and custom models without building serving infrastructure themselves. The homepage states the thesis plainly: "Inference performance drives profitability."

The brand's origin is academic and engineering-led — it grew out of systems research on efficient large-model serving, and its founding premise reframes inference from a fixed cost into an optimization surface. That research heritage shows up everywhere in the design: benchmark-first messaging, model names and metrics quoted verbatim, and a "Talk to an engineer" CTA that treats the visitor as a technical peer rather than a lead to be qualified.

What FriendliAI refuses, visible in its design: consumer-app hype and demo-gating (the primary CTA is "Get started", the secondary is "Talk to an engineer" — never "Request a demo" in their place), and the decorative heaviness of legacy enterprise software. What it embraces: a calm cool-grey canvas, one decisive blue, the micro-tuned Saans weight scale, and copy that quotes exact throughput numbers. It is the visual language of a company that expects to be judged on benchmarks.

12. Principles

1. Numbers over adjectives. Performance is stated as measurements ("#1 throughput on OpenRouter"), not superlatives. UI implication: surface concrete metrics — tokens/s, latency, cost — as first-class content, set in the tabular-friendly Saans; never replace a number with a boast.
2. Engineer as first-class user. The buyer is technical. UI implication: the primary path is "Get started" and "Talk to an engineer" — self-serve and peer-to-peer, never "Request a demo" gating.
3. One action, one blue. #2a62db means "do this"; #2453ba means "go here". UI implication: keep blue reserved for CTAs and links so the next step is never ambiguous on a dense technical page.
4. Flat and fast. Depth is a tool, not a texture. UI implication: separate with the #f7f8fa canvas and #d9e2ec hairlines; reserve the single ambient glow for one spotlight moment.
5. Precision as personality. The micro-tuned Saans weights (530, 650) are the brand's fingerprint. UI implication: honor the exact weight scale; generic 400/600/700 reads as a different, less rigorous product.

13. Personas

Personas below are fictional archetypes informed by publicly observable FriendliAI user segments (ML platform engineers, AI product teams, infrastructure leads), not individual people.

Daniel Cho, 33, Seoul. ML platform engineer at a scale-up shipping an LLM feature. Cares about tokens-per-second and per-request cost more than brand. Chose FriendliAI after reading a throughput benchmark and being able to spin up an endpoint without a sales call.

Priya Nair, 29, San Francisco. Founding engineer at an AI startup running open models in production. Uses "Talk to an engineer" precisely because it is not "Book a demo" — she wants an architecture conversation, not a pitch. Trusts vendors who quote metrics she can reproduce.

Marcus Feld, 41, Berlin. Infrastructure lead at a mid-size SaaS integrating generative AI. Evaluates inference providers on cost predictability and reliability. Reads the FriendliAI blog for model-serving benchmarks and mentally downgrades any vendor whose landing page leans on unquantified "revolutionary" claims.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and quiet, matching the engineered, near-flat aesthetic. Buttons respond to press with a subtle opacity/scale shift; feature cards and benchmark panels fade-in from below at motion-standard / ease-enter. The one ambient-glow spotlight card may intensify its glow slightly on hover, but nothing bounces or springs — an inference-infrastructure product signals steadiness and reliability, not playfulness. Under prefers-reduced-motion: reduce, all transitions collapse to instant and the product remains fully functional.