Pixloop Design.md
FloTorch homepage design, full-page screenshot

FloTorch

A dark, research-and-product AI interface built on a near-black charcoal canvas (#1d1d1e) with crisp white Inter headlines and a warm torch-orange accent (#f18642). The system reads as enterprise-grade infrastructure software — moody dark bands, low-contrast bordered cards holding feature claims, a glowing product-render hero, and restrained orange CTAs. Brand voltage comes from the orange torch mark and the cinematic dark hero render rather than from broad color use.

Works with Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
loading…

Color Palette

Accent

Neutrals

Typography

display-xl 55px · 500 · 1.2
The quick brown fox jumps
display-lg 46px · 400 · 1.1
The quick brown fox jumps
title 19px · 400 · 1.2
The quick brown fox jumps
body 13px · 400 · 1.7
The quick brown fox jumps
button 15px · 400 · 1.5
The quick brown fox jumps

Spacing & Shape

Spacing

Name Value Preview
xxs 8px
xs 10px
sm 13px
md 19px
lg 21px
xl 33px
xxl 48px
section 67px

Border Radius

Name Value Preview
sm 8px
md 11px
lg 19px

FAQ

What colors does FloTorch use?
FloTorch's core palette includes #f18642, #f5b86f, #7c3aed, #7b5cf6, #3898ec. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the FloTorch DESIGN.md.
What font does FloTorch use?
FloTorch's primary typeface is Inter. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
What is the FloTorch design system?
A dark, research-and-product AI interface built on a near-black charcoal canvas (#1d1d1e) with crisp white Inter headlines and a warm torch-orange accent (#f18642). The system reads as enterprise-gra…

More like this