Link Styles

G2GP

Inventory of every text-link format currently in use. The rich text link treatment has been promoted to the standard default via the f1-link utility (first section). Remaining styling is split across prose CSS, ad-hoc class conventions, and button variants. Remaining gaps are listed at the bottom.

STANDARD LINK (f1-link)

The default text link. Utility class in packages/ui/src/styles/utilities.css using the same treatment as .f1-rich links: brand color, transparent underline revealed on hover, 2px offset, 0.2s transition. Visited links dim to the brand-scnd equivalent (literal opaque hex — browsers block var() and alpha inside :visited rules). Button variant link composes this same utility.

f1-link (default / hover to reveal underline)

visited (brand-scnd) — visit the external link above to compare

f1-link with ArrowUpRight (page-reference composition)

RICH TEXT LINKS

Formalized via .f1-rich in packages/ui/src/styles/utilities.css — same treatment as f1-link above, applied automatically to anchors inside prose. Includes the brand-scnd visited state. Used by ChatRichText, ArticleBody, and project pages.

.f1-rich a (inline in body copy)

Portfolio rebalancing completed across all connected brokers. See the full allocation report for a breakdown by asset class, or review the latest trade confirmations in your ledger.

hover to reveal underline (no always-on underline)

PAGE REFERENCE LINKS

The convention used on example pages to point to another relevant page: text-brand, hover:underline, inline ArrowUpRight (3.5). Only exists as sandbox-local helpers (PlanLink in wip/plans, FullReferenceLink in ex/logos) — not exported from @f1carbon/ui.

text-brand hover:underline with ArrowUpRight

external variant (target blank)

same pattern without arrow

SECTIONHEADER HREF

Icon-only external affordance built into SectionHeader (text-quat, hover:text-prim). Related to but distinct from the brand page-reference pattern.

SectionHeader with href (arrow icon at right)

EXAMPLE SECTION

<LinkPreview>link-preview.tsx

BUTTON LINK VARIANTS

Button variants that render as link-like text. variant link now composes the f1-link utility, so it matches the standard link treatment above.

variant="link" (composes f1-link)

variant="linkmuted" (text-tert, hover:text-scnd, active:text-prim)

CARD-SHAPED LINK COMPONENTS

Formal components with their own hover systems — surfaces rather than text links, so they are referenced here instead of re-demoed.

existing demo pages

GAPS / TO FORMALIZE

What does not exist yet — the work this page is meant to scope.

Resolved: standard f1-link utility added (rich text treatment promoted to default), visited state on brand-scnd for both f1-link and .f1-rich anchors, Button variant link retokened to compose f1-link, RICHTEXT.md drift corrected.

No library Link component. The page-reference pattern (f1-link plus arrow) is still copy-pasted across sandbox pages. Promote it to an exported component when links appear in more production surfaces.

No focus-visible convention for text links. Buttons and cards have ring treatments; bare anchors do not.

Existing pages not migrated. Page-reference links across ex/ and wip/ pages still hand-roll text-brand hover:underline instead of f1-link. Migrate opportunistically.