Fireart Studio

Overview

Fireart Studio is a digital product design and development agency that empowers forward-thinking startups and enterprises to build elegant, high-performance products. The brand embodies 'Architectural Minimalism'—a design philosophy that marries Swiss-style precision with warm, human-centered approachability. The visual language is intentionally restrained: clean white surfaces, bold geometric forms, and a single vibrant accent (vivid orange #ff470a) that commands attention without overwhelming. The emotional response is one of confidence and clarity: users feel they are in the hands of experts who respect their time and intelligence. The interface never shouts; instead, it guides with quiet authority.

Fireart's voice is direct, professional, and conversational—never corporate-speak, never breathless. The vocabulary favors concrete nouns and active verbs: 'We build elegant products' rather than 'We leverage synergies.' Tone examples: 'Glitchd is designed to support the high-speed and confidence requirements of the next generation of on-chain games' (precise, technical, confident). The brand personality is that of a thoughtful senior designer or architect—someone who has seen a thousand projects and knows exactly what works.

Colors

The Fireart color system operates on a principle of 'Restrained Maximalism': the majority of the interface is neutral (white #ffffff, light gray #f5f5f6, dark charcoal #323234), with a single, unmissable accent color that drives all interactive moments. Primary (#ff470a) is the brand's signature orange—used exclusively on primary CTAs ('Contact', 'Book a call'), hover states, and focus indicators. It is warm, energetic, and impossible to ignore, yet never appears more than 2–3 times per screen. Secondary (#323234) is a near-black used for navigation, secondary buttons, and text hierarchy. Tertiary (#f78da7) is a soft pink reserved for accent cards, feature highlights, and supporting visual elements (as seen in the 'Built for Games' feature cards). The surface stack is deliberately minimal:

Typography

Fireart's type system reflects a 'Technical Elegance' aesthetic: PP Radio Grotesk (a geometric sans-serif with subtle warmth) anchors all display and headline levels, while Graphik (a humanist sans-serif) handles body copy and UI labels, and Inter (a neutral, highly legible sans-serif) is reserved for small labels and navigation. Display (60px, 400 weight, -0.02em tracking) and Headline-lg (54px, 400 weight) use PP Radio Grotesk's geometric forms to create visual impact without heaviness—the 400 weight keeps the aesthetic light and modern. Body-lg (18px, Graphik, 400 weight, 28px line-height) and Body-md (16px, Graphik, 400 weight, 24px line-height) are optimized for readability at small sizes, with generous line-height (1.5–1.67x) to ensure comfortable scanning. Labels (Inter, 12–14px, 50

Layout

Fireart uses a fluid 12-column grid with a maximum container width of 1200px, centered with equal margins on desktop. The grid is not rigid; sections often span 8–10 columns to create breathing room. Spacing follows a semantic scale: xs (4px) for micro-interactions, sm (12px) for tight grouping, md (24px) for standard section padding and component spacing, lg (40px) for major section separation, and xl (64px) for hero/footer spacing. The 'gutter' token (24px) is used consistently for horizontal padding within containers. White-space is generous and intentional: the hero section uses lg spacing above and below, cards use md padding internally, and section breaks use lg or xl to create visual rhythm. Mobile breakpoints compress spacing to sm/md only, maintaining the hierarchy but reducing ov

Elevation & Depth

Elevation in Fireart is achieved through subtle shadows and layering, never through color darkening or borders. The system uses three shadow levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor UI elements like badges or small cards, md (0 4px 8px rgba(0, 0, 0, 0.08)) for standard cards and buttons, and lg (0 8px 9px rgba(0, 0, 0, 0.06)) for modals, overlays, and hero sections. Shadows are always soft and diffuse, never sharp or high-contrast. On hover, cards transition from md to lg shadow (0 12px 24px rgba(0, 0, 0, 0.12)) over 250ms, creating a subtle lift effect. Dark overlays (like the 'Bu

Shapes

Fireart's shape language is 'Geometric Warmth'—a blend of sharp architectural precision and subtle human softness. Buttons and primary interactive elements use full-radius (border-radius: 9999px) to create a pill-shaped, approachable form that invites interaction. Cards and containers use lg radius (1rem / 16px) for a modern, slightly rounded aesthetic that feels contemporary without being overly soft. Inputs and smaller UI components use DEFAULT radius (0.375rem / 6px) for a more technical, precise appearance. Accent cards (like the pink feature cards in 'Built for Games') use md radius (0.75

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use the brand orange (#ff470a) background with white text, full-radius (9999px), and md padding (24px horizontal, 12px vertical), resulting in a 48px height. On hover, the background shifts to #ff561d (a slightly darker orange) over 200ms, and the shadow elevates from md to lg. Secondary buttons (button-secondary) use the dark charcoal (#323234) background with white text, same dimensions and radius, and transition to #464554 on hover. Ghost buttons (button-ghost) have a transparent background with a 1px border at outline-variant (#bfbec9), and fill with surface-container-high (#d0d0d0) on hover. All buttons use label-md typography (Inter, 14px, 600 weight) and never exceed 48px height; wide

Do's and Don'ts

**Do**

• Do use the primary orange (#ff470a) exclusively on CTAs and interactive focus states—it is the brand's most precious color and loses impact if overused.
• Do maintain generous white-space: minimum md (24px) padding inside cards, lg (40px) between major sections, and never more than 80 characters per line of body text.
• Do apply soft, diffuse shadows (0 4px 8px rgba(0, 0, 0, 0.08)) to create depth; never use harsh or high-contrast shadows.
• Do use PP Radio Grotesk for all headlines and display text to establish visual hierarchy and brand personality; reserve Graphik for body copy and Inter for small labels.
• Do transition all interactive states (hover, focus, active) over 150–250ms using cubic-bezier(0.4, 0, 0.2, 1) for a smooth, professional feel.

**Don't**

• Don't use the primary orange on more than 2–3 elements per screen; it is an accent, not a dominant color.
• Don't apply sharp corners (0px radius) to interactive elements; use full-radius (9999px) for buttons and lg radius (16px) for cards.
• Don't mix typefaces within a single text block; each hierarchy level (display, headline, body, label) has a designated font.
• Don't use harsh shadows (0 16px 40px rgba(0, 0, 0, 0.3)) or multiple nested shadows; keep the shadow stack simple and diffuse.
• Don't animate border-radius, opacity, or transform properties simultaneously; stagger animations over 200–300ms to avoid visual chaos.