Fortis Design System

Get DESIGN.md Download View template Works with

Fortis website template preview detail 2

Fortis website template preview detail 3

Fortis is an upbeat SaaS and startup template. It opens on a vivid blue-violet gradient (#472EFC into magenta #DC5DF7) with a big soft wave cutting into a ghost-grey section below, and thin diagonal light streaks crossing the colour. Headings are Montserrat 600 in sentence case, body text is a small, airy PT Sans, and every control is a fully rounded pill. The published home page is the template's showcase: it presents five home layouts and the components page as rounded screenshot cards.

Four signatures make it recognisable:

Gradient hero with a wave. The hero image sits under linear-gradient(27deg, #472EFC 23%, #DC5DF7E0), with a large translucent circle on the right, and ends in a wide, smooth wave that dips into the #F7F8FC section.
Diagonal light streaks. Thin white lines at about 45° cross the hero, the grey band and the CTA band, drifting as you scroll.
Pill pairs. Actions come in pairs of 48px pills with a 50px radius: a magenta filled pill (Explore Layouts) next to a white-outline pill (Only $79 on Marketplace).
Reveal footer. The navy footer (#1D2256) is fixed to the bottom of the viewport, 570px tall, and the page scrolls up off it (body has 570px bottom padding).

Fortis is a light design framed by saturated gradient bands and a navy footer.

Colors

Surfaces

canvas#FFFFFF

Page background, the scrolled nav, cards, dropdowns

surface-1#F7F8FC

Grey bands such as the layout showcase (--gost-gray-section)

surface-2#FAFBFC

Dropdown link hover (--gray)

field#FFFFFF

inverse-canvas#1D2256

Footer and its bottom bar (--midnight-blue)

inverse-canvas-deep#151946

With inverse-canvas: Footer and its bottom bar (--midnight-blue)

Ink

on-primary#FFFFFF

Text on primary

on-secondary#FFFFFF

ink#121217

Headings, the scrolled nav links

ink-muted#414147

Dropdown link hover text; use it for paragraphs that must be read

ink-subtle#919197

Paragraphs (the p rule) and field text

ink-faint#AFAFBB

Section eyebrows on grey: START BY CHOOSING ONE

on-media#FFFFFF

on-media-muted#FFFFFF · 70%

Eyebrows on the gradient

on-tag#FFFFFF

inverse-ink#FFFFFF

inverse-ink-muted#B7B7C7

Footer small print / column dividers

Action

primary#DC5DF7

Filled pills and form submits (--magenta)

primary-hover#DC5DF7

secondary#472EFC

Gradient start, the CTA band (--blue)

Lines & effects

dropdown-ink#818187

Dropdown links at rest

line#EBECF0

1px borders on inputs, dropdowns and the mega menu (--white-smoke)

line-media#FFFFFF · 21%

Outline pill border on colour / the nav bottom rule over the hero

outline-media#FFFFFF · 49%

Outline pill border on colour / the nav bottom rule over the hero

outline-primary#DC5DF7 · 60%

Border of the outline pill on white (scrolled nav Buy Template)

hero-start#472EFC

Hero overlay, 27°; the CTA band uses linear-gradient(37deg, #472EFC, #DC5DF7)

hero-end#DC5DF7 · 88%

Hero overlay, 27°; the CTA band uses linear-gradient(37deg, #472EFC, #DC5DF7)

tag#A5A6AA

Grey LAYOUT 1 tags

inverse-line#A7ADE4 · 39%

Footer small print / column dividers

Typography

Montserrat · display-hero

The quick brown fox jumps

Fortis - Webflow Startup Template (.banner-title). 45px · 600 · 1.2

Montserrat · headline-lg

The quick brown fox jumps

Home Layouts, Ready to get started?. 36px · 600 · 1.0

PT Sans · body-lg

The quick brown fox jumps

Hero lead text in white (.paragraph-bigger). 15px · 500 · 1.73

Montserrat · label-nav

The quick brown fox jumps

Nav links (capitalised), footer links. 14px · 600 · 1.43

Montserrat · eyebrow

The quick brown fox jumps

INTRODUCING FORTIS UI KIT TEMPLATE, START BY CHOOSING ONE. 11px · 600 · 1.82 · 2px

PT Sans · tag

The quick brown fox jumps

LAYOUT 1, COMPONENTS tags. 9px · 700 · 2.67 · 3px

Spacing & shape

Purpose	Value
Container	max 1200px (.container), centred
Section rhythm	.section is 140px top and bottom with 30px side padding; 100px top and bottom at ≤767px, with 15px sides at ≤479px
Breakpoints	991px, 767px and 479px

Spacing scale

Token	Value	Preview
`hair`	5px
`xs`	7px
`sm`	15px
`md`	27px
`lg`	30px
`xl`	50px
`2xl`	100px

Layout spacing

Token	Value	Preview
`section-side`	30px
`nav`	75px
`band`	91px
`section`	140px

Border radius

tag7px

card10px

pill50px

full9999px

Surfaces

How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.

Level 1canvas

Level 2surface-2

Level 3surface-1

Motion

Ornament parallax	Diagonal lines and shapes move y +100px / −100px (also ±50px) while their section scrolls, 500ms smoothing (while scrolling in view, page scroll)
Slow spin	Decorative shapes rotate continuously, 6000ms per turn
Hover lift	y 0 → −6px and back, 300ms ease (cards and pills)
Entrance	opacity 0 → 1 with y 15px → 0, 300ms ease or 500ms
Nav on scroll	Background, text colour and logo swap on scroll out of the hero, 300–500ms
Dropdown	Chevron rotate, 300ms ease; panel fades in
Links and pills	transition: all .2s; nav and footer links opacity .8 → 1 in 200ms

Do’s and don’ts

Use the blue-to-magenta gradient (#472EFC to #DC5DF7) for the hero and CTA bands, closed by a soft wave into #F7F8FC.
Keep every button and input a 50px-radius pill, 48px tall, padding 12px 28px, Montserrat 13px / 600.
Pair a filled #DC5DF7 pill with an outline pill (2px white at 49% on colour, #DC5DF7 at 60% on white).
Set headings in Montserrat 600, sentence case, with an 11px uppercase eyebrow (2px tracking) above.
Give screenshot cards a 10px radius and 14px 14px 30px 1px rgba(103,117,130,0.2).
Keep white text on #DC5DF7 to 13px+ weight 600 pill labels; the pair is about 3.0:1.
Set long paragraphs in ink-subtle #919197; it is about 3.1:1 on white and 2.95:1 on #F7F8FC. Keep it to short 13px blurbs and use #414147 where text must be read.
Put white text on the #A5A6AA tag for anything but 9px uppercase labels of one or two words; the pair is about 2.4:1. The same goes for ink-faint #AFAFBB (about 2.2:1 on #F7F8FC): 11px uppercase eyebrows only. Dropdown links in #818187 (about 3.9:1) stay at 12px / 600.
Use square corners on buttons or fields, or radii other than 7, 10 and 50px.
Mix the demo palettes (#45B649, #DCE35B, #FF5630) into the blue-magenta scheme.
Use Montserrat weights other than 600 for headings, labels or buttons, or uppercase headings.
Use dark or centred shadows; depth is the soft blue-grey offset shadow only.

Example prompt

Any page in the Fortis style

Prompt

Build your page in the Fortis style. Use a white page with #F7F8FC bands, 140px section padding and a 1200px container. The hero and CTA bands use linear-gradient(27deg, #472EFC 23%, rgba(220,93,247,0.88)) with thin white diagonal lines and a smooth wave at the bottom edge. Headings are Montserrat 600 in sentence case: 45px / 1.2 for the hero, 36px / 1.0 for sections, each with an 11px uppercase eyebrow (600, 2px tracking) above. Body text is PT Sans 13px / 1.77 in #919197 for short copy, #414147 for longer text; hero lead text is PT Sans 15px / 500 in white. Buttons are 48px pills (50px radius, padding 12px 28px, Montserrat 13px / 600): filled #DC5DF7 with white text, plus an outline version with a 2px white-49% border on colour. Cards have a 10px radius and box-shadow 14px 14px 30px 1px rgba(103,117,130,0.2). Tags are #A5A6AA with a 7px radius and white PT Sans 9px / 700 uppercase text, 3px tracking. End with a fixed #1D2256 reveal footer, 570px tall. Motion: parallax on ornaments, 6px hover lift in 300ms ease.

# Fortis Design System

> Measured from the Fortis template. Drop it into
> Claude, ChatGPT, Gemini, Cursor or v0.

## Overview

Fortis is an upbeat SaaS and startup template. It opens
on a vivid blue-violet gradient (#472EFC into magenta
#DC5DF7) with a big soft wave cutting into a ghost-grey
section below, and thin diagonal light streaks crossing
the colour. Headings are Montserrat 600 in sentence

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background, the sc… |
| surface-1    | #F7F8FC     | Grey bands such as the … |
| surface-2    | #FAFBFC     | Dropdown link hover (--… |
| field        | #FFFFFF     |                          |
| inverse-can… | #1D2256     | Footer and its bottom b… |
| inverse-can… | #151946     | With inverse-canvas: Fo… |
| on-primary   | #FFFFFF     | Text on primary          |
| on-secondary | #FFFFFF     |                          |
| ink          | #121217     | Headings, the scrolled … |
| ink-muted    | #414147     | Dropdown link hover tex… |
| ink-subtle   | #919197     | Paragraphs (the p rule)… |
| ink-faint    | #AFAFBB     | Section eyebrows on gre… |
| on-media     | #FFFFFF     |                          |
| on-media-mu… | #FFFFFF 70% | Eyebrows on the gradient |

## Typography

- display-hero: Montserrat 45px / 600
- headline-lg: Montserrat 36px / 600
- headline-md: Montserrat 32px / 600
- body-lg: PT Sans 15px / 500

{
  "$description": "Fortis design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#DC5DF7",
      "$description": "Filled pills and form submits (--magenta)"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#DC5DF7"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "secondary": {
      "$type": "color",
      "$value": "#472EFC",
      "$description": "Gradient start, the CTA band (--blue)"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#FFFFFF"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background, the scrolled nav, cards, dropdowns"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#F7F8FC",
      "$description": "Grey bands such as the layout showcase (--gost-gray-section)"
    },
    "surface-2": {
      "$type": "color",
      "$value": "#FAFBFC",
      "$description": "Dropdown link hover (--gray)"
    },
    "ink": {
      "$type": "color",
      "$value": "#121217",
      "$description": "Headings, the scrolled nav links"
    },

/* Fortis theme for Tailwind CSS v4, from its DESIGN.md (Flowmance).
 * Use it after Tailwind:  @import "tailwindcss";  @import "./theme.css";
 * Then use the utilities: bg-canvas, text-ink, text-headline-lg, rounded-tag, p-lg */

@theme {
  /* Colors */
  --color-primary: #DC5DF7;
  --color-primary-hover: #DC5DF7;
  --color-on-primary: #FFFFFF;
  --color-secondary: #472EFC;
  --color-on-secondary: #FFFFFF;
  --color-canvas: #FFFFFF;
  --color-surface-1: #F7F8FC;
  --color-surface-2: #FAFBFC;
  --color-ink: #121217;
  --color-ink-muted: #414147;
  --color-ink-subtle: #919197;
  --color-ink-faint: #AFAFBB;
  --color-dropdown-ink: #818187;
  --color-line: #EBECF0;
  --color-line-media: #FFFFFF36;
  --color-outline-media: #FFFFFF7D;
  --color-outline-primary: #DC5DF799;
  --color-hero-start: #472EFC;
  --color-hero-end: #DC5DF7E0;
  --color-on-media: #FFFFFF;
  --color-on-media-muted: #FFFFFFB3;
  --color-tag: #A5A6AA;
  --color-on-tag: #FFFFFF;
  --color-field: #FFFFFF;
  --color-inverse-canvas: #1D2256;
  --color-inverse-canvas-deep: #151946;
  --color-inverse-ink: #FFFFFF;
  --color-inverse-ink-muted: #B7B7C7;
  --color-inverse-line: #A7ADE463;

  /* Fonts */
  --font-sans: "Montserrat", sans-serif;
  --font-montserrat: "Montserrat", sans-serif;
  --font-pt-sans: "PT Sans", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 45px;
  --text-display-hero--line-height: 1.2;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 600;

/* Fortis design tokens as plain CSS custom properties, from its DESIGN.md (Flowmance).
 * Paste into any stylesheet and use them anywhere: color: var(--color-ink); border-radius: var(--radius-md); */

:root {
  /* Colors */
  --color-primary: #DC5DF7; /* Filled pills and form submits (--magenta) */
  --color-primary-hover: #DC5DF7;
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-secondary: #472EFC; /* Gradient start, the CTA band (--blue) */
  --color-on-secondary: #FFFFFF;
  --color-canvas: #FFFFFF; /* Page background, the scrolled nav, cards, dropdowns */
  --color-surface-1: #F7F8FC; /* Grey bands such as the layout showcase (--gost-gray-section) */
  --color-surface-2: #FAFBFC; /* Dropdown link hover (--gray) */
  --color-ink: #121217; /* Headings, the scrolled nav links */
  --color-ink-muted: #414147; /* Dropdown link hover text; use it for paragraphs that must be read */
  --color-ink-subtle: #919197; /* Paragraphs (the p rule) and field text */
  --color-ink-faint: #AFAFBB; /* Section eyebrows on grey: START BY CHOOSING ONE */
  --color-dropdown-ink: #818187; /* Dropdown links at rest */
  --color-line: #EBECF0; /* 1px borders on inputs, dropdowns and the mega menu (--white-smoke) */
  --color-line-media: #FFFFFF36; /* Outline pill border on colour / the nav bottom rule over the hero */
  --color-outline-media: #FFFFFF7D; /* Outline pill border on colour / the nav bottom rule over the hero */
  --color-outline-primary: #DC5DF799; /* Border of the outline pill on white (scrolled nav Buy Template) */
  --color-hero-start: #472EFC; /* Hero overlay, 27°; the CTA band uses linear-gradient(37deg, #472EFC, #DC5DF7) */
  --color-hero-end: #DC5DF7E0; /* Hero overlay, 27°; the CTA band uses linear-gradient(37deg, #472EFC, #DC5DF7) */
  --color-on-media: #FFFFFF;
  --color-on-media-muted: #FFFFFFB3; /* Eyebrows on the gradient */
  --color-tag: #A5A6AA; /* Grey LAYOUT 1 tags */
  --color-on-tag: #FFFFFF;
  --color-field: #FFFFFF;
  --color-inverse-canvas: #1D2256; /* Footer and its bottom bar (--midnight-blue) */
  --color-inverse-canvas-deep: #151946; /* With inverse-canvas: Footer and its bottom bar (--midnight-blue) */
  --color-inverse-ink: #FFFFFF;
  --color-inverse-ink-muted: #B7B7C7; /* Footer small print / column dividers */
  --color-inverse-line: #A7ADE463; /* Footer small print / column dividers */

  /* Fonts */
  --font-montserrat: "Montserrat", sans-serif;
  --font-pt-sans: "PT Sans", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 45px;
  --text-display-hero-font: var(--font-montserrat);
  --text-display-hero-weight: 600;
  --text-display-hero-line-height: 1.2;
  --text-display-hero-tracking: 0px;
  --text-headline-lg: 36px;

Unlock the full design systemSee plansIncluded with any plan that has this template’s platformUpgrade to All AccessAlready a member? Log inOr add this template’s platform to your plan

Download DESIGN.md

More design systems like this

SaaS design systems, the same colors first.

Browse all 398

Bring any of them to your AI tool

All Access unlocks all 398 design systems, ready for Claude, ChatGPT, Gemini, Cursor, v0 and Lovable, plus 400+ templates on all 5 platforms.

Get All Access Upgrade to All Access

Colors

Surfaces

Ink

Action

Lines & effects

Typography

Montserrat · display-hero

Montserrat · headline-lg

PT Sans · body-lg

Montserrat · label-nav

Montserrat · eyebrow

PT Sans · tag

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Fortis style

More design systems like this

Tessel

Autona

Boxkit

Munio

Bring any of them to your AI tool