Magentix Studio

Overview

Magentix Studio dresses an AI-first product studio in editorial, art-gallery clothing. The personality is calm and craft-driven: oversized Fraunces serif headlines (often with italic accents like come together and Say hello.) sit over warm off-white surfaces, while muted sans body copy and monospace meta-tags keep the supporting matter quiet. This is not a typical SaaS pitch — it reads like a contemplative literary journal that happens to build software.

Density is deliberately airy. Sections are separated by generous vertical whitespace ({spacing.section} — 80px), content runs in a centered single-column narrative, and scattered painterly image tiles tilted in 3D give the hero a loose, curated feel. Hierarchy is built almost entirely through type scale and family contrast rather than color or weight — near-black Ink ({colors.ink} — #18181B) does nearly all the heavy lifting for text, with the serif/sans/mono split signalling role.

Elevation is low-relief: most surfaces are flat or hairline-bordered, and depth is reserved for a few floating image objects and cards that carry soft diffused shadows. The whole system inverts cleanly into a full dark theme.

Key Characteristics:

• Editorial serif display (Fraunces) at a single light weight (350) against a clean grotesk workhorse (Hanken Grotesk).
• Near-black ink over warm off-white — a two-color-feeling palette with no chromatic accent.
• Generous rounded geometry: pill buttons, rounded cards, and big-radius image panels.
• Whitespace is the primary layout device; sections breathe at 80px rhythm.
• Hierarchy from size and family, not from bold weights or color pops.
• Soft, sparse shadows — elevation is an exception, not a default.
• A complete inverted dark theme (light ink on charcoal).
• Monospace (Space Mono) accents used only for small meta labels and captions.

Colors

The palette is intentionally near-monochromatic: warm neutral surfaces, near-black ink, and a single hairline gray. There are no brand accent hues and no gradients — contrast and warmth do all the work.

Ink & Text

• Ink ({colors.ink} — #18181B, aliased as {colors.primary}): the near-black used for headlines, primary text, and interactive marks. Dominant color by far in the evidence.
• Body ({colors.body} — #45454B): softened near-black for longer-form running text.
• Muted ({colors.muted} — #6B6B70): secondary/meta text, badge labels, and de-emphasized captions.

Surface

• Parchment ({colors.surface} — #F8F8F9): the warm off-white canvas and card fill; the default background everywhere.
• Parchment Alt ({colors.surface-alt} — #EDEDF0): a slightly deeper neutral for badges and inset zones, used to distinguish surfaces without borders.

Hairlines & Borders

• Hairline ({colors.hairline} — #DCDCE0): the 1px rule used for card borders, input outlines, and secondary-button strokes. This is the primary way surfaces are delineated instead of shadow.

Dark Mode

A full inversion is defined — light ink on charcoal, not a dimmed variant:

The strategy is a straight semantic swap: every role keeps its job while the light/dark relationship flips. Charcoal surfaces ({dark.colors.surface}) hold near-white ink ({dark.colors.ink}), and the hairline darkens to #38383E so borders stay whisper-quiet against the darker canvas.

Typography

Three type families divide labor cleanly: an expressive serif for display, a grotesk workhorse for text, and grotesk/mono for accents.

Font Family

• Fraunces — the editorial serif for every display and title tier, always at a light 350 weight. Its optical character carries the gallery tone.
• Hanken Grotesk — the sans workhorse for lead, body, nav, and captions; all at 400.
• Space Grotesk — used only for the label role at weight 500 with tight tracking.
• Space Mono — reserved for tiny uppercase-style meta tags and captions.

Hierarchy

Principles

Only three weights exist across the whole system: 350 (Fraunces display), 400 (all Hanken text and mono), and 500 (Space Grotesk labels only). Heavier and lighter cuts are deliberately absent — do not reach for bold to make emphasis; use size and family instead. Letter-spacing is negative and tightens as type grows (up to -1.3px on {typography.hero-display}) to keep large serif headlines optically compact, while small sans/mono text opens up slightly (+0.075px). Line-height is tight for display (1.05–1.1) and relaxes to 1.3–1.4 for reading text.

Note on Font Substitutes

All four families are open-source (Google Fonts): Fraunces, Hanken Grotesk, Space Grotesk, and Space Mono. If any is unavailable, substitute Fraunces with another optical serif and preserve the light 350 weight and negative tracking; substitute Hanken Grotesk with Inter or a neutral grotesk at 400.

Layout

Spacing System

The scale is 4px-based and used consistently: {spacing.xs} (4px), {spacing.sm} (8px), {spacing.md} (12px), {spacing.lg} (16px), {spacing.xl} (24px), {spacing.2xl} (32px), {spacing.3xl} (40px), {spacing.4xl} (48px), and {spacing.section} (80px) for major vertical section breaks. In the evidence, 12px and 24px are the workhorse gaps (highest weight), with 80px reserved for section rhythm.

Grid & Container

The layout is a centered single-column narrative. A 4-column card grid carries feature blurbs and collapses to one stacked column on mobile. The footer uses a strict 3-column grid (Pages / Socials / Reach us — {components.footer} columns: 3). The hero breaks the grid deliberately, scattering tilted 3D image tiles asymmetrically around centered type. Exact max-width/gutter values were not measured, so treat the container as a centered, comfortably-margined column.

Whitespace Philosophy

Whitespace is the primary compositional tool. Sections are separated by generous 80px vertical space ({spacing.section}), cards pad at 24px ({components.card} padding), and the airy hero relies on empty space around scattered tiles to feel gallery-like rather than dense. The mobile layout preserves the same vertical rhythm while collapsing every grid to a single column.

Elevation & Depth

Shadow philosophy. Elevation comes primarily from surface delineation (hairline borders) rather than shadow. Shadows are soft, diffused, and low-opacity (6–8%) — never crisp or dark. They are reserved for a handful of floating objects: the 3D-tilted image tiles and the large hero/CTA image panels that need to read as physical objects on the flat canvas. Text and most cards stay nearly shadowless for a calm, low-relief hierarchy.

Shapes

Border Radius Scale

The geometry is consistently soft and generously rounded — nothing in this system has a sharp corner. Radii scale with element size: inputs sit at 12px, cards at 15–24px, and big image panels balloon to 64px ({rounded.3xl}). Interactive controls (primary and secondary buttons, badges, nav pills) are fully pill-shaped via {rounded.full}. Even the scattered hero image tiles are rounded squares. The overall shape character pairs organic painterly imagery with tidy geometric rounding.

Components

Navigation

navbar — A floating pill navbar fixed at the top ({components.navbar} position: fixed, height 58px). It carries Ink text ({colors.ink}) with a transparent background (the observed backdrop had no blur and no border). It holds 3 nav links styled in {typography.nav-link} (Hanken Grotesk, 15px, 400, #18181B) and does carry a CTA button on the right. No hairline rule is applied to the bar itself.

nav-link / link — Inline text links in {typography.nav-link}, colored {colors.ink}. Used in the header and inline body.

Buttons

button-primary — Solid Ink fill ({colors.primary} — #18181B) with Parchment text ({colors.surface}), fully pill-shaped ({rounded.full}), padded 12px 24px, typeset in {typography.nav-link}. The primary call to action, including the header CTA.

button-secondary — Parchment fill ({colors.surface}) with Ink text, a 1px {colors.hairline} border, same pill shape and padding. The quieter companion action.

Cards & Containers

card — Parchment surface, Ink text, 22px radius ({rounded.xl}), 1px {colors.hairline} border, 24px padding, and a soft diffused shadow (rgba(10,10,12,0.06) 0px 4px 20px). The default feature/testimonial container.

card-elevated — Parchment surface, tighter 15px radius ({rounded.lg}), and a subtler shadow (rgba(0,0,0,0.08) 0px 0.98px 11.74px). Used for floating image tiles and hero panels.

Inputs & Forms

input — Parchment fill, Ink text, 1px {colors.hairline} border, 12px radius ({rounded.md}), padded 10px 16px, typeset in {typography.nav-link}. Appears on the contact page.

Badges & Chips

badge — Parchment Alt fill ({colors.surface-alt}), Muted text ({colors.muted}), pill-shaped ({rounded.full}), padded 4px 12px, typeset in {typography.mono-caps} (Space Mono, 13px). Used for small meta tags like 'Idea' and 'No entries yet'.

Footer

footer — A static (non-fixed) footer 484px tall with Ink text, laid out in 3 columns (Pages / Socials / Reach us) holding 9 links total in {typography.nav-link} (Hanken Grotesk, 15px, 400, #18181B). Background is transparent (inherits the canvas); no CTA button and no backdrop blur.

Do's and Don'ts

Do

• Do use only the observed font weights — 350 for Fraunces display, 400 for Hanken/mono text, 500 for Space Grotesk labels; never add heavier or lighter cuts.
• Do build hierarchy through the type scale and family swaps (serif vs grotesk vs mono), not through color or bold weight.
• Do delineate surfaces with the 1px {colors.hairline} border first; reserve shadow for genuinely floating objects.
• Do keep buttons, badges, and nav pills fully rounded with {rounded.full}.
• Do separate major sections with the 80px {spacing.section} rhythm to preserve the airy editorial feel.
• Do keep shadows soft and low-opacity (6–8%), matching {components.card} and {components.card-elevated}.
• Do pair the light Fraunces display with negative letter-spacing (down to -1.3px on {typography.hero-display}) so large headlines stay optically compact.

Don't

• Don't introduce accent hues or gradients — the palette is near-black ink on warm neutral surfaces only.
• Don't use bold Fraunces or heavier Hanken; emphasis comes from size, not weight.
• Don't apply heavy or dark drop-shadows; depth stays low-relief.
• Don't give interactive controls sharp corners — everything rounds.
• Don't crowd sections; compressing the 80px section rhythm breaks the gallery calm.
• Don't use Space Mono for body text — it is only for small meta tags ({typography.mono-caps}).
• Don't tint the navbar or footer; both were observed with transparent backgrounds inheriting the canvas.

Responsive Behavior

This is a two-viewport analysis (desktop and mobile screenshots); no intermediate breakpoint pixel values were measured, so treat the transition points as inferred.

The desktop layout uses a centered single-column narrative with a 4-column feature-card grid and a 3-column footer. On mobile, every grid collapses to a single stacked column while preserving the same vertical rhythm. The hero's scattered 3D-tilted image tiles are reduced in number on mobile to keep the composition legible. The floating pill navbar stays fixed at the top across both viewports (58px).

Touch targets are supported by the token padding: buttons pad 12px 24px and inputs 10px 16px, giving comfortably tappable pill controls. Because only two viewports were captured, exact breakpoints and mid-size behavior are unverified.

Iteration Guide

1. Change colors only via the semantic tokens ({colors.ink}, {colors.surface}, {colors.hairline}, etc.) — the dark theme mirrors these role-for-role, so editing a role updates both themes coherently.
2. Never add a new font weight; the system is locked to 350 / 400 / 500. To emphasize, move up the type scale ({typography.title-md} → {typography.display-md}), don't bolden.
3. Keep the three-family split intact: Fraunces = display, Hanken Grotesk = text, Space Grotesk/Space Mono = accents. Don't cross roles.
4. Button, badge, and pill variants live in {components.button-primary}, {components.button-secondary}, and {components.badge} — all inherit {rounded.full}; keep new controls pill-shaped.
5. Elevation is a two-tier system ({components.card} soft shadow, {components.card-elevated} subtle shadow) over a hairline-bordered flat baseline. Add depth by promoting between these, not by inventing darker shadows.
6. Respect the 4px spacing scale and the 80px {spacing.section} rhythm; new layout gaps should snap to existing tokens.
7. The unbreakable boundaries: no accent color, no gradients, no sharp corners, no bold weights. These define the editorial identity.

Known Gaps

• Navbar and footer backgrounds were reported as rgba(0,0,0,0) (transparent) but dropped during grounding as not confidently observed; the actual fill behind the fixed navbar on scroll is unverified.
• Hover, focus, and active states for buttons, links, and inputs were not captured — no interaction evidence exists.
• Animation and transitions (the 3D tile tilt, scroll behavior, dark-mode toggle transition) are not measured.
• Breakpoint values are unknown — only two viewports (desktop and mobile) were captured, so mid-size reflow is inferred.
• Container max-width and grid gutters were not directly measured; the centered-column description is from screenshots.
• Body color ({colors.body} — #45454B) appeared with very low weight in the evidence (single instance), so its exact usage footprint is thin.
• Only 3 pages were captured (home, feed, contact); other routes or auth-walled surfaces are not represented.