How fonttrio.xyz is designed

Overview

fonttrio.xyz presents a predominantly dark surface treatment in the captured pages. The system is anchored by #000000, #ededed, and #888888, with typography led by System, Montserrat, Karla, Archivo, Outfit, Libre Baskerville, Mukta, Schibsted Grotesk, Pt Serif, Pt Sans, Inconsolata, Space Grotesk, Exo 2, Titillium, Jet Brains Mono, Roboto, Manrope, Source Code Pro, and Plus Jakarta Sans. The guide below names reusable design roles only where the captured evidence supports them.

The reference set uses representative captured pages. It is a design reference, not a claim about the site's private source code or a complete responsive specification.

Design tokens

The token names are practical labels for the recorded values. They are not claims about the source site's variable names.

Colors

Typography

Spacing

Shape and depth

The captured pages use 1px 0px 0px solid 0px, 1px solid 6px, 1px solid 0px, and 0px none 8px border treatments.

Colors

The visual system is predominantly dark surface treatment. Surface colors include #000000 and #141414. Text colors include #ededed and #888888. Keep image-derived colors separate from interface colors.

Typography

The captured type system uses System, Montserrat, Karla, Outfit, Libre Baskerville, Archivo, Mukta, Schibsted Grotesk, Pt Serif, Pt Sans, Inconsolata, Space Grotesk, Exo 2, Titillium, Jet Brains Mono, Roboto, and Manrope. The table records measured size, weight, leading, and tracking where available; it does not establish licensing or a complete fallback stack.

Layout

The captured pages use values such as 0px 48px 64px, 16px, 12px 16px, 0px 48px, and 0px 0px 4px for padding and margin. These are measured usages, not a resolved scale. The available evidence does not establish container widths, grid rules, or breakpoints.

Visual language

The captured visual language is predominantly dark surface treatment. Surface treatment centers on #000000 and #141414. No structured gradient or shadow treatment is established.

Components and states

The captured pages include repeated styling on <div>, <button>, <span>, <p>, <h3>, <code>, and <a> elements. The evidence does not identify reusable component boundaries or interaction states. Treat loading, focus, hover, pressed, error, and disabled states as implementation work to validate rather than as captured facts.

Responsive behavior

The captured token set does not establish breakpoint values or mobile behavior. Validate stacking, navigation changes, image treatment, and type scaling against the representative captures before implementing a responsive adaptation.

Practical implementation guidance

• Preserve the dark surface relationship and the measured type hierarchy before adding decorative treatment.
• Start from the returned typography, spacing, color, and border values; name any new scale or semantic role as an adaptation rather than as a source fact.
• Keep the captured font families separate from licensing decisions.
• Use screenshots to validate component anatomy, responsive behavior, focus treatment, and motion before shipping.
• Avoid introducing gradients or shadows beyond the captured treatment; none are established.

Scope note

The guide uses representative captured pages. The evidence supports the values and observations above; it does not establish component semantics, interaction states, motion timing, breakpoint rules, font licensing, or a complete source stylesheet.