flowmanceFischer Design System
Fischer is a one-person photography portfolio with a magazine feel. The first screen is split in two: on the left, a white column of serif text; on the right, a tall colour portrait of the photographer with his name set huge across it. Almost everything is set in DM Serif Display, a high-contrast display serif, at every size, from the 120px name to 14px labels. Turquoise (#0CE5E1) is the only UI colour, and it appears as underlines and rules (2px to 7px); its one fill is the button hover.
Four signatures make it recognisable:
- The split screen. A white text column on the left and a full-height portrait on the right that stays in view while the left side scrolls through the gallery. Mark Fischer sits across the portrait at 120px with line height 0.67, so the two lines overlap, and the letters take on the photo's colours.
- Turquoise underlines. The Fischer logo has a 5px turquoise bottom border; a 2px turquoise rule opens the hero text; gallery titles sit on a 7px turquoise bar (Flower, Out of Shape, Valencia); menu links get a 10px #64F0ED highlight bar.
- Serif-only voice. Headlines, paragraphs, form labels and the footer are all DM Serif Display 400. Only the button, the Check my prices link and the menu use Work Sans 600.
- The handwritten signature. A script Mark Fischer signature (Tuesday Night) under the intro, like a signed print.
Fischer is a light design with midnight-blue (#032535) bands for services, contact and the menu.
Colors
Surfaces
#FFFFFFPage background, the hamburger circle
#F1F1F1Placeholder behind gallery and Instagram images while they load
#032535Inputs are transparent on the band; placeholders are grey
#032535Services and contact bands, the menu overlay (--midnight-blue)
Ink
#FFFFFFText on primary
#000000Headlines, gallery titles on light photos, the footer
#000000Body copy
#727272Gallery title variant on mid-grey photos (.lightbox-link)
#FFFFFFGallery titles on dark photos
#FFFFFFText on inverse-canvas
#FFFFFF · 65%Secondary text on the midnight band
Action
#032535The button is an outline on the midnight band, so its visible fill is the band colour
#0CE5E1.button:hover fills turquoise; the text stays white
#0CE5E1Every underline and rule: logo (5px), hero rule (2px), gallery titles (7px), menu sub-lines (2px), blockquote rule (3px), button hover (--turquoise)
#64F0EDThe 10px highlight bar under the big menu links
Lines & effects
#E4EDEF · 15%1px input borders on the band
#FFFFFF · 15%1px button border
#999999Placeholder text on field
Typography
DM Serif Display · display-hero
The quick brown fox jumpsMark Fischer across the portrait (lines overlap). 120px · 400 · 0.67
DM Serif Display · headline-xl
The quick brown fox jumpsHi! I'm Mark Fischer (.top-title). 55px · 400 · 1.09
Tuesday Night · logo-signature · shown in Caveat (fallback)
The quick brown fox jumpsThe handwritten signature. 40px · 400 · 1.0
DM Serif Display · title-lg
The quick brown fox jumpsService titles on the band (.service-title). 25px · 400 · 1.2
DM Serif Display · body-lg
The quick brown fox jumpsThe hero intro (.top-title-h3). 20px · 400 · 1.45
DM Serif Display · label-menu
The quick brown fox jumpsMenu sub-links (.nav-sub-text). 17px · 400 · 1.18
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px for the bands and footer |
| Section rhythm | .section pads 100px top and bottom with 5% sides on #032535 |
| Breakpoints | 991px, 767px and 479px (Webflow defaults); 479px has the most rules |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 15px | |
md | 20px | |
lg | 30px | |
xl | 40px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
grid-gap | 30px | |
menu-line | 75px | |
footer-top | 80px | |
section | 100px | |
nav | 100px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Menu open | Panel size change 500ms; links move to y 0, 500ms outExpo |
| Hamburger to close | Lines rotate, 500ms outExpo |
| Menu link bar | scaleX 0 → 1 on hover, 350ms outExpo; back to 0 on leave, 350ms outExpo |
| Menu text colour | 300ms ease |
| Scroll reveal | opacity 0 → 1, 1000ms outQuart, on scroll into view; reverses on scroll out |
| Button and Instagram hover | all 200ms |
Do’s and don’ts
- Set all headlines and body copy in DM Serif Display 400, with black #000000 text on white.
- Use turquoise #0CE5E1 only as underlines and rules: 5px under the logo, 7px under gallery titles, 2px above the hero text.
- Keep the portrait in a fixed right column while the left column scrolls.
- Show photos large, whole and square-cornered, with the title centred on the image.
- Use #032535 bands for services and contact, with white text and the outline button.
- Keep Work Sans 600 for the button, the menu and small sans links only.
- Bold the serif; every DM Serif Display style is weight 400.
- Fill large areas with turquoise or add a second accent colour.
- Round photos or put colour overlays on them.
- Put white text on the turquoise hover fill for anything but the short 16px/600 button label; it is about 1.6:1, so keep the hover brief.
- Use the script font for anything except the signature.
- Use ink-subtle #727272 for body text; it is for 60px gallery titles on light photos (about 4.3:1 on #F1F1F1).
- Use the unused CSS colours (#F64D52, #2E856E) as accents.
Example prompt
Any page in the Fischer style
More design systems like this
Portfolio design systems, the same colors first.
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 AccessUpgrade to All AccessHow to use the Fischer design system
Pick a file to see what it’s for and where it goes.
What it is
The whole design system in one markdown file, written for AI: every color, type style, spacing value, component and motion rule, plus do's, don'ts and a ready prompt.
Best for
Claude, ChatGPT, Gemini, Cursor and v0, or any other AI tool that builds pages or code.
How to use it
- Put
DESIGN.mdin your project and mention it in your request, or save it as.cursor/rules/fischer.mdc - For the rule file, start it with a front-matter block that sets
alwaysApply: true, so every chat uses it - Ask: “Build a pricing page using DESIGN.md.” Cursor follows the colors, fonts, spacing and rules
- Put
DESIGN.mdin the project root - Add one line to
CLAUDE.md: “Follow DESIGN.md for all UI.” - Ask for any page or component; Claude reads the file first
- Attach
DESIGN.mdto the chat (or paste it in) - Ask: “Build a landing page in this design system.”
- Keep the file in the chat or project knowledge, so follow-up pages stay on style
What it is
Every token as data, in the W3C Design Tokens format: colors with their roles, type styles, radius, spacing, and component tokens that point at them.
Best for
Figma (Tokens Studio), Style Dictionary and other design-token tools, and build scripts.
How to use it
- In Figma, open Tokens Studio, choose Import, and pick
tokens.json - Or point Style Dictionary’s
sourceat it to generate tokens for any platform - In code, import it like any JSON file
What it is
A Tailwind CSS v4 theme: every color, font, type style, radius and spacing value becomes a Tailwind utility, like bg-canvas, text-headline-lg or rounded-md.
Best for
Tailwind v4 projects, and AI builders that write Tailwind (v0, Lovable, Bolt).
How to use it
- Save
theme.cssnext to your main CSS file - Import it after Tailwind:
@import "tailwindcss"; @import "./theme.css"; - Use the classes:
bg-canvas text-ink rounded-md p-lg
What it is
The same tokens as plain CSS variables on :root. Component values point at the color variables, so changing one color updates everything that uses it.
Best for
Any website: plain CSS, Webflow custom code, Framer, WordPress.
How to use it
- Add it to your stylesheet, or in Webflow paste it into Site settings → Custom code inside a
<style>tag - Use the variables anywhere:
color: var(--color-ink) - Change a token once and every place that uses it follows