Feature
Generated families, real engineering
Every family ships as manifest data. The server render resolves the same typography, composition, and palette tokens the product uses.
ManifestTokens
the authority family
Authority
The institutional family — restraint as the loudest signal.
Authority is the design language of institutions that command attention through restraint rather than decoration. Newsreader serif at measured weights, Inter body at reading leading, JetBrains Mono meta, and a canvas tinted by the palette itself — hairline rules in place of shadows, accent reserved for the thinnest structural marks, and a complete absence of ornament.
The references are specific and retrievable. US Supreme Court opinions, Federal Reserve releases, white-shoe law firms, academic press publications, policy think tanks, and the annual reports of 150-year-old corporations. If what you build could not share a page with those institutions' actual publications, the implementation has missed the family.
Authority is not "a serious-looking family." That framing produces a serif-styled tech product page, which is the single most common failure mode. The voice is the voice of published institutions reporting to their stakeholders, and the craft is what you don't add.
Default palette · Slate · 6 recommended palettes below
Best for
- Legal and policy publications
- Financial regulator and central-bank pages
- Academic press and journals
- Institutional annual reports
- Think tanks and policy institutes
Character
- formal
- structural
- measured
- institutional
- precise
TypeNewsreader · Inter · JetBrains Mono
How it differs
Editorial is contemporary-magazine warmth; Authority is institutional severity. Cinematic shares the serif but goes near-black and emotional; Authority stays on tinted canvas and reserved.
01 - Typography
The voice of authority.
Hero title - Playfair Display
Made with intention.
Hero subtitle - Playfair Display
A supporting lead carries the second voice without competing.
Section title - Playfair Display
Section heading at the second tier
Section subtitle - Playfair Display
Supporting copy holds context next to the title without competing for attention.
Card title - Playfair Display
Card title at the third tier
Body - Playfair Display
The body face carries paragraphs, captions, and inline labels - anywhere prose reads at length. It is tuned for legibility at small sizes and reads naturally next to the display face above.
Caption
Smaller supporting copy, used for metadata and inline notes.
Meta - JetBrains Mono
01 - 02 - 03 - v1.0 - 99.9% - $29 - 240ms
02 - Palette
Resolved palette.
The same family-aware mapping the product runtime applies. Each token has been resolved against the active palette and theme.
Backgroundcolor-mix(in srgb, rgb(148 163 184) 16%, #020617)
Surfacecolor-mix(in srgb, rgb(148 163 184) 8%, rgb(18 13 28))
Bordercolor-mix(in srgb, rgb(67 56 202) 18%, #0f172a)
Ink#fafafa
Brandrgb(100 116 139)
Brand · strongrgb(148 163 184)
Accentrgb(67 56 202)
On brandrgb(255 255 255)
03 · Primitives
The building blocks.
Each control below is the real component the runtime renders. The same buttons, badges, inputs, and chips appear in every generated site that picks this family.
Buttons
Badges
DefaultAccentOutlineInk
Tags
DefaultAccentOutlineInk
Status
NeutralSuccessWarningDangerInfo
Filter controls
Icon containers
Small
Medium
Large
Fields
04 - Card archetypes
How content sits.
Five archetypes - feature, pricing, profile, stat, and testimonial. They use server-rendered family type and palette tokens so this section keeps first-paint SSR parity.
Pricing
RecommendedStudio
$29/ month
- +Unlimited generations
- +Custom domains
- +Priority models
Profile
MC
Mara ChenProduct design lead
Twelve years leading design at high-growth SaaS. Available for fractional engagements this quarter.
AvailableFractional
Stat
!99.9%
Uptime across all rendered sites this quarterLast 90 daysTestimonial
#"The shared semantic tokens made the new family feel consistent from the first pass."
Jules ParkStaff designer, Patagonia Digital
05 - Motion
How it moves.
Hover or focus either surface. The transition uses CSS variables and respects reduced motion without requiring a hydrated showcase.
Card - hover
Lift on hover, hairline tightens
Move your pointer over this card. The surface rises a few pixels and the border tightens to the brand color.
Button - focus
Tab into the button below. The focus ring uses the family's brand color and transitions at this family's curve.
06 · Recommended palettes
Try a different chord.
Each palette below pairs with this family. The cards link straight to a fresh render of this page in that palette — share the URL, it's crawlable.
06 · Compositions
A few of the section topologies.
Compositions are family-agnostic — every family can render every topology. Combined with card layouts and collection layouts, the engine produces dozens of section presentations per section type. Diagrams show the shape; the family supplies the skin.
banner
Banner
Content stacks above a wide image rail.
sidebar
Sidebar
Text column paired with a media column.
bands
Bands
Alternating horizontal bands of copy and media.
breakout
Breakout
A featured module breaks the grid edge.
07 · See it live
See a full page.
A complete site rendered in Authority. Open the example to walk through every section in the family's voice.