DESIGN SYSTEM

The Fortis style guide.

Every token, type ramp, and component the template ships with — rendered live from the same source files you'll edit. Use it as a reference while you customize, or as a QA sheet after.

JUMP TO COMPONENTSREAD THE DOCS
COLOR

Palette & tokens

The full palette lives in components/fortis/tokens.ts as the COLORS object. Change a value there and it propagates to every page.

#EEF0EF
bg
Page surface
#E7E9E8
bgAlt
Alternating section
#FFFFFF
surface
Cards & panels
#C4EE24
accent
CTAs · selection · pulse
#3C4145
ink
Primary text
#6B7174
muted
Secondary text
#9AA0A2
mutedSoft
Tertiary text
#DADCDB
border
Hairlines & card edges
#2B2F32
dark
Footer · dark sections
#23272A
darker
Elevated dark
#1F2326
darkest
Code · dark CTA
TYPOGRAPHY

Type scale

Two families do all the work: Darker Grotesque for display, Space Mono for everything functional. Wired through next/font in app/layout.tsx.

DISPLAY — DARKER GROTESQUE
Inference at scale
Hero title · 84px · weight 600 · -0.02em
Built for builders
Section heading · 54px · weight 600 · -0.02em
Model catalog
Subsection · 40px · weight 600 · -0.02em
Real-time routing
Card title · 26px · weight 500 · -0.02em
MONO — SPACE MONO
The inference layer for teams shipping at scale.
Lead · 17px · weight 400
Pay only for the tokens you serve, metered per second.
Body · 14px · weight 400
USAGE-BASED PRICING
Label / eyebrow · 12px · weight 700 · 0.1em tracking
COMPONENTS

Building blocks

Every primitive below is exported from components/fortis/subpage.tsx. Import what you need and compose pages like the /pricing and /docs examples.

Button — variant=primary | outline | dark | ghost (ghost is for dark surfaces)
SECTION LABEL
Eyebrow — small tracked label with the accent tick · PixelArrow — link/CTA glyph
Default card

Surface panel with the shared lift-on-hover treatment. Hover to see the transition.

Card
Highlight card

The featured variant — accent border with a soft lime ring. Use it for the recommended option.

Card highlight
12ms
TIME-TO-FIRST-TOKEN
99.99%
UPTIME SLA
200+
MODELS
$0
MINIMUM
Stat — display figure + tracked mono caption
OPERATIONALSQUARE TICK
Status indicator — accent dot + mono label (also used in the footer and mobile menu)
Card · 18pxPanel · 14pxPill / button · 999
Corner radii — 18px cards · 14px panels · 999px pills
BRAND

Logo & marks

Swap these three SVGs to rebrand the whole template — they live in components/fortis/brand.tsx.

FortisLogo — full wordmark, height-scalable
FortisMark — compact square mark
On dark — wordmark reversed to the accent
CONTENT

Prose & code

Long-form text and code panels for docs, legal, and changelog pages.

Prose container

Wrap rich text in <Prose> and write plain h2 / h3 / p / ul / a — styling comes from .fortis-prose in globals.css.

  • Consistent rhythm and measure
  • Inline links and code tokens
  • No per-page typography work
TYPESCRIPT
import { Section, Card, Button }
  from "@/components/fortis/subpage";

export default function Page() {
  return (
    <Section>
      <Card highlight>
        <Button href="/#build">BUILD</Button>
      </Card>
    </Section>
  );
}
CodeBlock — dark terminal panel with an optional label

One system, every page.

Compose the primitives above into new pages in minutes — the landing, pricing, and docs pages are all built from exactly these parts.