A consumer-tech landing that lets one saturated blue do the heavy lifting and still reads premium, not loud — cream canvas, electric-blue accent, Marlin Soft. Post-Chrome browser renaissance.
This entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm - do not reproduce brand identity, logo, product copy, or proprietary features.
A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in Arc’s language, not just a screenshot.
Paste into your agent. No signup, no cost.
Playful-premium consumer tech built from exactly two decisions: one electric saturated blue (#3139fb) as the whole brand voice, on a warm buttery cream canvas (#fffcec) that replaces clinical white. Personality lives in color and in Marlin Soft SQ display type — rounded-square terminals, heavy 700 weight, aggressive negative px tracking (down to -1.82px) — NOT in gradients (there are none) and NOT in motion (only 0.15s ease micro-transitions). Elevation is soft and shallow: 5px-blur shadows at low opacity, radii capped at 10px. Warmth and confidence through restraint; joy without spectacle.
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the palette (one decisive electric blue #3139fb used only as accent on a warm cream #fffcec canvas with near-black #000000 text — NO gradients, flat fills only), the typographic voice (Marlin Soft SQ for display/headings at weight 700 with negative px tracking, Marlin for body, InterVariable for small UI labels, ABC Favorit Mono for eyebrow/mono marks), the soft-shallow elevation (5px-blur shadows ≤25% black, radii 8-10px), and the subtle motion vocabulary (transform + background transitions at 0.15s ease, nothing theatrical) across every page and component I ship. Treat this as my project's constitution — any new component should pass as if crafted in the same studio. Apply the language, not the source brand's specific copy or identity. Critically: never introduce a gradient and never add spring or scroll-choreography motion — Arc's character comes from color and type alone. When I ask you to build a page or component, enforce these rules by default and flag any deviation.
Layout
Editorial
Content width
Bounded
Framing
Textured
Grid strength
Soft
One electric saturated blue (#3139fb — the single brand-tier accent, 304 measured occurrences) on a warm buttery cream canvas (#fffcec). Text is near-black #000000 with a #696969 gray descender for de-emphasis; #ffffff is reserved for text/marks sitting on the blue. The signature emotional move is the cream background replacing clinical white — it makes the saturated blue read friendly rather than harsh. Two low-frequency support tints exist (deep navy #210784, soft pink #ff9999) but appear only as rare backgrounds, never as a second brand voice.
Mode strategylight-first
Electric blue #3139fb used strictly as accent — CTAs, links, key marks, focus rings. Never a large section fill; flooding it collapses the warmth.
Warm cream #fffcec is the dominant canvas (173 occurrences) — the deliberate replacement for #ffffff that sets the crafted, friendly register.
Near-black #000000 for primary text (196 occurrences); #696969 gray for captions, metadata, de-emphasized labels.
Pure white #ffffff reserved for text and marks rendered on top of the #3139fb blue — the only place it appears as foreground.
Support tints #210784 (deep navy) and #ff9999 (soft pink) are rare-background only (≤3 occurrences each) — never promote them to a second accent.
Display + headings: Marlin Soft SQ, weight 700. The rounded-square terminals at heavy weight are the brand's typographic fingerprint — this family carries identity, no logo or illustration required.
Body copy: Marlin (weight 400) at 16px / line-height normal. Marlin Soft SQ weight 700 at 16px is the bold-emphasis pair within body.
Small UI labels: InterVariable — 12px weight 600 with +0.4px letter-spacing for eyebrows, 17px weight 500 for secondary UI copy. Inter handles dense interface text where Marlin would feel too characterful.
Mono / eyebrow marks: ABC Favorit Mono at 12px (weight 400-700) with wide positive tracking (0.6-1.8px) — reserved for labels, tags, technical eyebrows.
Display tracking is negative and in px, scaling with size: -1.4px at 28px, -1.6px at 40px, -1.82px at 45.51px headings. Larger type pulls tighter — a constant optical correction.
Heading line-height runs tight and near-unitary: 30px on 28px display, 39px on 40px, 42.25px on 45.51px hero — display sits compact, never airy.
Body paragraphs sit at 16-17px with normal line-height; keep measure to roughly 45-65ch. No italic for emphasis — shift to Marlin Soft SQ 700 instead.
4px base unit. Dominant scale: 4 / 6 / 8 / 10 / 12 / 16 / 20 / 24 / 32 / 48 px — with 24px (82 occurrences) and 8/12px (38 each) as the workhorse values.
Section-scale rhythm uses the larger captured steps: 58px and 128px for major vertical gaps between page sections.
Global page padding is driven by `--padding: 32px`, wrapped safe-area-aware: `max(env(safe-area-inset-left), 32px)`. Honor this on left/right page gutters.
Container max-width is 1280px (`--max-width`); bounded content rails also appear at 340 / 900 / 1344 / 1400 / 1440 px for narrower clusters and edge-to-edge bands.
Flex/grid gutters draw from 6 / 8 / 10 / 12 / 16 / 24 / 32 px — 12px is the default gap (19 occurrences). No magic numbers; pick from the ladder.
Fixed chrome heights: navbar 64px (`--navbar-height`), mobile CTA bar 56px (`--mobile-cta-height`).
Surface styleFlat
Elevation is soft and shallow — the deepest captured shadow is `rgba(0,0,0,0.25) 0 2px 8px 0`. Nothing floats dramatically; cards rest gently on the cream.
Default card lift is `rgba(0,0,0,0.1) 0 5px 5px 0` — a low, diffuse drop, never a bloom or halo.
Structure is carried by hairline borders (1px and 2px solid in `--border`), not by stacked shadow — borders do most of the delimiting work.
Corner radii stay gentle: 8px is the default (9 occurrences), 10px the larger step. Never sharp, never pill-rounded outside indicator badges.
Techniques
Soft 5px drop on cream
Cards and raised surfaces use `box-shadow: rgba(0, 0, 0, 0.1) 0 5px 5px 0` over the #fffcec canvas. The low blur and offset keep the lift subtle — the surface reads grounded and friendly, not glassy or floating. Reserve the stronger `rgba(0,0,0,0.25) 0 2px 8px 0` for the single most prominent overlay (e.g. a sticky CTA or menu).
Hairline border as primary delimiter
Most structural separation comes from 1px (and occasionally 2px) solid borders in the `--border` token, not from shadow. Cards, inputs, and dividers default to a hairline outline; shadow is added only when a surface genuinely needs to lift off the page.
Radius scale is tight: 8px default for buttons/cards/inputs, 10px for slightly larger containers. Do not exceed 10px outside `rounded-full` indicator badges.
Border weights are 1px (hairline, default) and 2px (emphasis); style is always solid — no dashed or dotted treatments observed.
Icons are stroke-based and lightweight to match the friendly tone; avoid heavy filled or duotone variants that would fight the soft palette.
Tap targets respect the 56px mobile CTA height and 64px navbar — interactive controls stay comfortably large, never cramped.
Hovertransform + background shift (0.15s ease, ease) — the dominant interactive pattern (5 occurrences), transform + box-shadow (0.15s ease, ease-out) — soft card lift on hover (3 occurrences), opacity fade (0.1s ease-out) — link and subtle-element hover
Scroll patterns
No scroll-triggered reveals captured beyond a single ambient marquee — keep content static on scroll.
One long-duration `scroll` animation at 78.5225s linear exists for an infinite marquee/ticker band only — never apply this timing to content reveals.
No parallax, no stagger choreography — the page does not move as you scroll, by design.
Interactive transitions sit on 0.15s ease for transform + background; 0.15s ease-out for box-shadow; 0.1s ease-out for opacity. These three are the entire interactive motion vocabulary.
Section-level background/transform shifts may use 0.2s ease-in-out — the longest interactive duration captured.
The only long animation is a 78.5225s linear infinite marquee (`scroll`). Reserve linear/long timing exclusively for that ticker pattern; never for affordance or reveal.
Spring animations are forbidden — deterministic ease/ease-out/ease-in-out keyword timing only. No cubic-bezier flourishes were observed.
useReducedMotion mandatory — collapse the marquee to static and reduce hovers to opacity-only or disable.
Personality comes from color and type, not motion. If a transition draws attention to itself, it's wrong for this language.
Primary CTA is the saturated-blue filled button; secondary actions use the cream + hairline-border variant. Keep one primary action per view.
Navigation is a fixed 64px top bar; mobile surfaces a persistent 56px bottom CTA bar rather than burying the primary action.
Hover feedback is a gentle transform + background shift (0.15s) or a soft shadow lift on cards — never a color flood or scale pop.
Tooltips and disclosures reveal on hover + focus; dismiss instantly on blur. No motion-heavy entrances.
Form fields show focus via a #3139fb border + 1px ring; validation copy inline below the field in #696969.
Empty/loading states stay quiet — a mono eyebrow label plus one line of body copy; avoid spinners that loop attention.
Marquee/ticker bands (the 78.5s linear scroll) are decorative social-proof only — never place interactive controls inside them.
Approachdesktop-first
Desktop-first — the marketing narrative is built around large product screenshots (hero at 2400×1386) that need width to breathe, then reflows down. Mobile keeps the same language: the persistent 56px bottom CTA bar is the one mobile-specific affordance, ensuring the primary action is always one thumb away. No alternate mobile architecture; the page is the page, reflowed.
Breakpoints: sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536 — standard Tailwind ladder (matches captured breakpoints).
Container max-width is 1280px (`--max-width`); bounded rails step through 340 → 900 → 1344 → 1400 → 1440 px for narrow clusters and full-width bands.
Page gutters use `max(env(safe-area-inset-*), 32px)` — safe-area-aware so notched devices never clip content.
Navbar 64px on all sizes; mobile gains the 56px bottom CTA bar — desktop hides it.
Display type scales down with tracking compensation: heading 45.51 → 40 → 28px, negative tracking eases as size drops (-1.82 → -1.6 → -1.4px).
focus-visible: 2px #3139fb ring with a #fffcec offset on every interactive element — replaces the default outline.
Contrast: #000000 text on #fffcec cream ≈ 19:1 (AAA). White #ffffff on #3139fb blue ≈ 5.4:1 (AA for normal text, AAA for large) — keep blue surfaces to white text only.
Gray #696969 on #fffcec ≈ 5.3:1 (AA) — fine for captions/metadata; never drop body text below 4.5:1.
Never signal state with the blue accent alone — pair color with text or an icon, since #3139fb on cream alone can be ambiguous for color-blind users.
All interactive elements reachable via Tab in logical order; the persistent mobile CTA must be keyboard-focusable.
Motion respects prefers-reduced-motion — the 78.5s marquee stops, hovers collapse to opacity-only.
ARIA labels on icon-only controls; aria-live='polite' on status/toast; aria-expanded on disclosures.
Decorative product screenshots get meaningful alt text describing the feature shown; purely ornamental marquee items use alt=''.
Next.jsNext/ImageFramer Motion
Built on Next.js (images served via `/_next/image` with srcset 1x/2x at q100). No motion library was directly observable in the extract; the subtle keyword-timing transitions (0.15s ease) sit comfortably within plain CSS or Framer Motion defaults. No canvas, WebGL, or Lottie observed — the visual payload is high-resolution PNG product screenshots on a textured noise overlay.
Next/Image with explicit `sizes` and 1x/2x `srcset`; `priority` only on the above-fold hero (Dia hero image, 2400×1386).
Background texture via `noise-light.png` overlay (3 occurrences) on the cream canvas — a subtle grain that reinforces the crafted-paper feel; keep it low-opacity.
Transitions as plain CSS or Framer Motion with `ease`/`ease-out` constants at 0.15s — no cubic-bezier, no spring config.
useReducedMotion guard wraps the marquee and any hover transform; the page must be fully usable static.
No parallax, no scroll-linked transforms — static-first, animated-discreet.
Commit to one electric blue (#3139fb) as the entire accent voice — CTAs, links, focus rings, key marks.
Use warm cream #fffcec as the canvas instead of clinical white — it's the single most important emotional decision.
Carry brand voice through Marlin Soft SQ display type at weight 700 with negative px tracking, not through gradients or illustration.
Keep elevation soft: 5px-blur shadows ≤25% black, radii 8-10px, hairline borders doing most of the structural work.
Hold motion to 0.15s ease micro-transitions on transform/background; reserve long linear timing for the marquee alone.
Pair the noise-light texture overlay with the cream to reinforce the crafted, paper-like surface.
Pass every page through useReducedMotion before shipping — the marquee must stop, hovers must reduce.
Never introduce a gradient — Arc ships ZERO (gradients = [] in the extract). A mesh or linear gradient cheapens exactly the premium-flat feel you're transferring.
Never let #3139fb spread to large section backgrounds — it is a punctuation accent at this saturation; flooding it kills the warmth.
Never add spring, parallax, or scroll-choreography motion — the personality is in color and type; theatrical motion breaks the calm, fast feel.
Never substitute clinical #ffffff for the cream canvas — it strips the crafted warmth and makes the blue read harsh.
Never exceed a 10px corner radius outside `rounded-full` indicator badges, and never deepen shadows past `rgba(0,0,0,0.25) 0 2px 8px`.
Never introduce a second brand accent — the navy and pink tints are rare backgrounds, not a second voice.
Never apply the 78.5s linear marquee timing to content reveals or affordances — it belongs to the ticker band only.
Tailwind v4 @theme inline only — no runtime style concatenation, no CSS-in-JS.
Spacing base 4px, scale 4/6/8/10/12/16/20/24/32/48 px (section steps 58/128).
Container max 1280px (`--max-width`); bounded rails 340/900/1344/1400/1440 px.
Palette: accent #3139fb, canvas #fffcec, text #000000, gray #696969, white #ffffff on blue. Support tints #210784/#ff9999 as rare backgrounds only. NO gradients.
Motion: three durations (0.1 / 0.15 / 0.2 s), three easings (ease, ease-out, ease-in-out). No springs, no cubic-bezier. Long 78.5s linear timing for marquee only.
Gradient grep: ZERO gradient declarations anywhere — `linear-gradient` / `radial-gradient` / `conic-gradient` must not appear (Arc ships none).
Accent surface audit: #3139fb appears only on accents (buttons, links, rings, marks), never as a large section background.
Canvas audit: page background is #fffcec cream, not #ffffff — verify the warm neutral is in place.
Font-family grep: display/headings use Marlin Soft SQ; body uses Marlin; small UI uses InterVariable; eyebrows use ABC Favorit Mono. No stray system display fonts.
Tracking audit: display text uses negative px tracking scaling with size (-1.4 → -1.6 → -1.82px), not em.
Radius grep: no corner radius exceeds 10px outside rounded-full badges.
Shadow audit: no shadow deeper than `rgba(0,0,0,0.25) 0 2px 8px`; default lift is the 5px-blur soft drop.
Transition grep: durations draw from {0.1s, 0.15s, 0.2s} and easings from {ease, ease-out, ease-in-out}; no cubic-bezier, no spring.
Motion audit: the only long/linear animation is the 78.5s marquee; no scroll-reveal or parallax present.
Contrast audit: #000000 on #fffcec ≥ 4.5:1 (passes AAA); white on #3139fb ≥ 4.5:1 for normal text.
Design tokens
Observed token system
Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.
Inspector
Observable layers
Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.
Depth-first walk of the meaningful sections. 13 nodes across 6 levels, shallow to deep by color.
body1
div3
div1
div1
div1
Nav
Main3
Section
Aside
div1
Section (×4)
Footer1
Aside
Accessibility
Contrast matrix
36 combinations - 20 pass AA - 12 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.
AaThe quick brown fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#FFFFFF
APCA Lc
+106
Use
foreground on background
AaThe quick brown fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#000000
APCA Lc
-108
Use
background on foreground
AaThe quick brown fox20.39
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#FFFCEC
APCA Lc
+104
Use
foreground on background
AaThe quick brown fox20.39
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFCEC
bg
#000000
APCA Lc
-106
Use
background on foreground
AaThe quick brown fox14.70
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#210784
APCA Lc
-103
Use
background on accent
AaThe quick brown fox14.70
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#210784
bg
#FFFFFF
APCA Lc
+100
Use
accent on background
AaThe quick brown fox14.27
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFCEC
bg
#210784
APCA Lc
-101
Use
background on accent
AaThe quick brown fox14.27
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#210784
bg
#FFFCEC
APCA Lc
+98
Use
accent on background
AaThe quick brown fox10.27
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#FF9999
APCA Lc
+64
Use
foreground on accent
Images
Image strategy
Observable image posture - total count, lazy-loading ratio, and format mix. The hero image is measured above the fold.
