An unofficial, original Arc-inspired product system with 9 evidence-backed elements for Harbor's focused workflow language.
Includes DESIGN.md, tokens.json, full CSS, Tailwind v4 token mapping and matching UI specimens. Preview for free; protected guidance and style downloads require Starter or Super. Framework installation and theme support are verified only where listed.
Delivered component specimen
Inspect the kit's typography, palette, icons, spacing and motion.
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.
Reference style: warm light with a quiet dark companionTypography
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.
Assigned collection
9 published components in collection order
Components
These working component previews are supplied with the kit. Open a component to inspect its code; the reference screenshots show the original website.
More AI Kits
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 16 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger.
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.
