An unofficial, original Arc-inspired product system with 9 evidence-backed elements for Harbor's focused workflow language.
Foundations
A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.
Style identity
An original browser surface inspired by Arc's current clean-and-calm language: warm paper-like canvases, soft typographic shapes, contextual Spaces and Profiles, and deliberate split or stacked browsing layouts.
warm light with a quiet dark companion themeTypography
Marlin
Observed Arc body and navigation family for calm interface copy and utility labels.
Marlin, -apple-system, system-ui, Segoe UI, Roboto, sans-serifFallback: -apple-system, system-ui, Segoe UI, Roboto, sans-serif
Marlin Soft SQ
Observed rounded headline and hero display variant.
Marlin Soft SQ, Marlin, InterVariable, sans-serifFallback: Marlin, InterVariable, sans-serif
ABC Favorit Mono
Observed technical labels, product metadata, and small navigation accents.
ABC Favorit Mono, Space Mono, ui-monospace, monospaceFallback: Space Mono, ui-monospace, monospace
InterVariable
Observed support family for responsive utility and product UI states.
InterVariable, Inter, system-ui, sans-serifFallback: Inter, system-ui, sans-serif
Palette
Warm paper
#fffcecObserved Arc page canvas
Ink
#1b1b1bPrimary copy on light surfaces
White surface
#ffffffRaised content and browser frame
Soft sand
#f3efe3Secondary surface and space rail
Coral accent
#ff8f66Primary interaction and warm emphasis
Sky accent
#6f7cffSecondary context and selected space
Leaf signal
#5ec698Privacy or healthy state
Type scale
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Soft display | 72px | 700 | 0.96 | -0.06em |
| Hero mobile | 42px | 700 | 1.0 | -0.05em |
| Section heading | 44px | 700 | 1.05 | -0.045em |
| Product heading | 24px | 700 | 1.2 | -0.03em |
| Body | 16px | 400 | 1.55 | 0 |
| Interface label | 13px | 500 | 1.35 | 0.01em |
| Mono metadata | 11px | 500 | 1.45 | 0.06em |
Spacing & shape
Iconography
Use rounded joins and generous optical whitespace. Pair space/profile symbols with labels and preserve a low-noise rail. The pack uses original CSS symbols rather than Arc's protected artwork.
System metrics
Radius
Spacing
Motion
Elevation
Quiet surface
0 1px 0 rgba(27,27,27,.05)Default separation on warm paper
Split frame
0 16px 40px rgba(36,32,39,.14)Focused browser panel and split-view frame
Focus ring
0 0 0 3px rgba(255,143,102,.34)Keyboard focus and selected context
Surfaces & shape
Paper canvas
#fffcecWarm primary page background
Browser surface
#ffffffFocused web content panel
Space rail
#f3efe3Persistent context navigation
Dark calm
#17141bExplicit dark theme background
Guidelines
Imagery
Use original CSS browser frames, paired panes, abstract calm color fields, and small context icons. Avoid live Arc/Dia screenshots, product logos, and downloaded campaign images.
Layout
Use 1160px maximum width with 24px desktop and 16px mobile gutters. Keep the browser or paired panes visually primary; collapse split layouts to a stacked reading order below 720px and maintain a persistent context cue.
Concept
Use the file tree to move between the full reference preview, implementation guidance, portable tokens, and framework-ready styles. Each surface stays focused, so you can understand the system before copying code.
Assigned collection
9 published components in collection order
Components
Production-ready specimens from this AI Kit's approved collection.
More like this
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
An unofficial, original v0-inspired Prompt Workshop system grounded in 17 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.
A high-contrast studio language for a platform that moves between creative production, developer workflows, robotics, research, and enterprise. The system uses a dark stage, warm action color, and compact cross-platform wayfinding without copying Runway's wordmark, content, or media. Responsive previews and 8 evidence-backed interface elements.
An original, unofficial Observable-inspired system for reactive notebooks, executable explanations, and data visualization surfaces. It retains only 11 focused elements supported by Observable's live notebook and chart workflows.
A friendly builder language for moving from prompt to app: vivid purple/green accents, a prominent idea field, artifact type selection, parallel execution, built-in infrastructure, team plans, agent chat, and a clear publish handoff. It is an original study without Replit's logo, pixel font, testimonials, screenshots, or protected copy. Responsive previews and 14 evidence-backed interface elements.