The Fruxinfo Design Language
One consistent voice across every page — a warm orange, an editorial serif, and a clean geometric sans. This page is the single source of truth for colors, typography and components.
01 · Color
Brand Palette
Orange carries the brand's energy; charcoal and soft grays keep the canvas calm so the orange always wins attention. Click any swatch to copy its hex.
Primary — Orange Family
Neutrals
02 · Typography
Two Voices, One Story
Tiempos Text brings editorial warmth to headlines and long copy. Manrope handles everything functional — buttons, labels, forms and captions.
Tiempos Text
Headlines, section titles and body paragraphs. Its bookish contrast makes the brand feel established and human.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !?&@#%
font-family: 'Tiemposfont' · body defaultManrope
Buttons, navigation, chips, form labels and captions. Geometric, modern and highly legible at small sizes.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !?&@#%
className="Manrope" · UI elementsType Scale
Boost Your Business Online
Web & CRM Development
Our Latest Services
Why Choose Fruxinfo
Custom CRM Software
We build websites, mobile apps and CRM systems that help businesses grow since 2012.
GET A QUOTE · VIEW PORTFOLIO · CONTACT US
Serving clients globally · Ahmedabad, India
03 · Components
Buttons, Chips & Cards
Every interactive element uses Manrope, a 100px pill radius, and the orange fill-sweep hover that is the site's signature motion.
Buttons
- Outline pill is the default — the fill sweeps in from the left on hover.
.Custome_Orange_buttonfor primary CTAs (20px),_applyfor compact contexts (15px).- Never use two solid CTAs side by side — pair solid with outline.
Chips & Form Fields
Inputs use an underline style — gray at rest, orange when active. The typed value renders bold orange, echoing the quote-popup pattern.
Corner-Border Card
Hover this card — the orange corners grow to a full frame..border_hover · used for featured content
Soft-Shadow Card
The default card: white surface, 16px+ radius, and a whisper-light shadow..why_choose_card · box-shadow 0 1px 8px rgba(0,0,0,.1)
04 · Principles
Rules We Design By
Orange is an accent, not a wall
Reserve #E77025 for the ~10% that must be noticed — CTAs, links, key numbers. Large areas stay white, tint or charcoal.
Serif speaks, sans works
Tiempos for anything read as a sentence; Manrope for anything scanned as a control. Never mix them inside one element.
Round and warm
Pills at 100px radius, cards at 16–30px, soft shadows only. No hard edges, no pure-black heavy shadows.
