Remixes of www.foliosociety.com
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Foliosociety
description: |
The Folio Society design system embodies refined literary elegance with a
timeless, sophisticated approach. The aesthetic balances minimalist restraint
with curated moments of visual richness—white space and monochromatic
foundations provide clarity and focus, while thoughtfully composed book
imagery and subtle colour accents convey the brand's heritage and cultural
authority. The visual language prioritizes legibility and intentionality,
treating each element with the discipline of a carefully bound volume.
Typography is classical and serif-driven, evoking the permanence of print,
while interactions remain understated and precise. The overall mood is calm,
intellectual, and deeply invested in the artifact of the book itself.
source:
url: "https://www.foliosociety.com"
pagesAnalyzed: 6
extractedAt: 2026-10-21
tokensMeasured: true
colors:
primary: "#212121"
canvas: "#000000"
surface-alt: "#F9F9F9"
ink: "#999999"
body: "#212121"
accent-1: "#6C896D"
accent-2: "#100F0E"
accent-3: "#007AFF"
neutral-1: "#CACACA"
neutral-2: "#EBEBEB"
typography:
heading-md:
fontFamily: freight-display-pro
fontSize: 34px
fontWeight: 500
lineHeight: 1.4
letterSpacing: 0px
heading-sm:
fontFamily: freight-display-pro
fontSize: 28px
fontWeight: 500
lineHeight: 1.4
letterSpacing: 0px
heading-xs:
fontFamily: freight-display-pro
fontSize: 20px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
body-lg:
fontFamily: neue-haas-unica
fontSize: 18px
fontWeight: 350
lineHeight: 1.33
letterSpacing: 0px
body-lg-strong:
fontFamily: neue-haas-unica
fontSize: 18px
fontWeight: 700
lineHeight: 1.33
letterSpacing: 0px
body-md:
fontFamily: freight-display-pro
fontSize: 16px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
body-sm:
fontFamily: neue-haas-unica
fontSize: 14.4px
fontWeight: 350
lineHeight: 1.4
letterSpacing: 0.4px
textTransform: uppercase
body-xs:
fontFamily: neue-haas-unica
fontSize: 14px
fontWeight: 350
lineHeight: 1.4
letterSpacing: 0px
body-xs-strong:
fontFamily: neue-haas-unica
fontSize: 14px
fontWeight: 400
lineHeight: 1.4
letterSpacing: 0px
button-xl:
fontFamily: freight-display-pro
fontSize: 24px
fontWeight: 500
lineHeight: 1.4
letterSpacing: 0px
button-lg:
fontFamily: neue-haas-unica
fontSize: 20px
fontWeight: 400
letterSpacing: 0px
button-md:
fontFamily: neue-haas-unica
fontSize: 16px
fontWeight: 400
letterSpacing: 0px
button-sm:
fontFamily: neue-haas-unica
fontSize: 14px
fontWeight: 400
lineHeight: 1.86
letterSpacing: 1px
textTransform: uppercase
label:
fontFamily: neue-haas-unica
fontSize: 14px
fontWeight: 350
lineHeight: 1.43
letterSpacing: 0px
caption-xs:
fontFamily: neue-haas-unica
fontSize: 12px
fontWeight: 350
lineHeight: 1.4
letterSpacing: 0px
caption-xs-uppercase:
fontFamily: neue-haas-unica
fontSize: 12px
fontWeight: 350
lineHeight: 1.3
letterSpacing: 0.5px
textTransform: uppercase
rounded:
none: 0px
xs: 4px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 36px
section: 40px
band: 44px
borderWidths:
thin: 1px
elevationStrategy: color-blocking
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#FBFBFB"
surface: "#F1F1F1"
surfaceRaised: "#E9E9E9"
text: "#121212"
textMuted: "#747474"
border: "#D8D8D8"
accent: "#212121"
accentFg: "#FFFFFF"
focusRing: "#212121"
elevation: shadow
dark:
bg: "#000000"
surface: "#F9F9F9"
surfaceRaised: "#F9F9F9"
text: "#999999"
textMuted: "#212121"
border: "#121212"
accent: "#5E5E5E"
accentFg: "#FFFFFF"
focusRing: "#212121"
elevation: "border+surface"
contrastFailures:
- "dark: muted on bg = 1.3:1 (needs 4.5:1)"
- "dark: text on surface = 2.71:1 (needs 4.5:1)"
components:
button-primary:
typography: "{typography.button-md}"
textColor: "rgb(255, 255, 255)"
height: 48px
padding: "11px 20px 11px 20px"
rounded: "{rounded.xs}"
backgroundColor: "{colors.primary}"
button-primary-sm:
textColor: "rgb(255, 255, 255)"
height: 40px
padding: "8px 8px 8px 8px"
fontSize: 20px
fontFamily: freight-display-pro
fontWeight: 400
rounded: 20px
backgroundColor: "{colors.primary}"
button-text:
typography: "{typography.button-md}"
textColor: "{colors.body}"
height: 48px
padding: "11px 20px 11px 20px"
rounded: "{rounded.xs}"
backgroundColor: "rgb(255, 255, 255)"
button-text-lg:
typography: "{typography.body-lg}"
textColor: "rgb(255, 255, 255)"
height: 52px
padding: "0px 0px 4px 0px"
card:
typography: "{typography.heading-xs}"
textColor: "{colors.body}"
badge-icon:
textColor: "{colors.body}"
height: 24px
fontSize: 24px
fontFamily: freight-display-pro
fontWeight: 400
lineHeight: 1
badge-filled:
typography: "{typography.body-sm}"
textColor: "{colors.body}"
height: 24.2031px
padding: "2px 8px 2px 8px"
rounded: 30px
backgroundColor: "{colors.neutral-2}"
badge-text:
typography: "{typography.body-xs-strong}"
textColor: "{colors.body}"
height: 23.5938px
padding: "2px 8px 2px 8px"
rounded: 30px
navigation:
typography: "{typography.body-md}"
textColor: "{colors.body}"
height: 19.5938px
footer:
typography: "{typography.body-md}"
textColor: "{colors.body}"
backgroundColor: "{colors.surface-alt}"
link:
typography: "{typography.body-md}"
textColor: "{colors.body}"
link-2:
typography: "{typography.body-xs-strong}"
textColor: "rgb(255, 255, 255)"
states:
input-focus:
target: input
state: focus
outline: none
boxShadow: none
other-hover:
target: other
state: hover
backgroundColor: "rgba(0, 0, 0, 0)"
other-active:
target: other
state: active
backgroundColor: "rgba(0, 0, 0, 0)"
button-hover:
target: button
state: hover
opacity: 1
link-focus-visible:
target: link
state: focus-visible
outline: "currentcolor solid 1px"
outlineColor: currentcolor
outlineWidth: 1px
other-focus:
target: other
state: focus
opacity: 0
other-focus-visible:
target: other
state: focus-visible
outline: "currentcolor solid 1px"
outlineColor: currentcolor
outlineWidth: 1px
input-hover:
target: input
state: hover
boxShadow: "white 0px 0px 0px 30px inset"
breakpoints:
- width: 375
containerWidth: 360
gridColumns: 4
navLinksVisible: 3
menuToggleVisible: true
headingPx: 34
bodyPx: 14
sectionPaddingX: 0
- width: 768
containerWidth: 753
gridColumns: 1
navLinksVisible: 0
menuToggleVisible: true
headingPx: 34
bodyPx: 18
sectionPaddingX: 0
- width: 1024
containerWidth: 1009
gridColumns: 1
navLinksVisible: 0
menuToggleVisible: true
headingPx: 34
bodyPx: 18
sectionPaddingX: 0
- width: 1280
containerWidth: 1265
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: true
headingPx: 34
bodyPx: 18
sectionPaddingX: 0
- width: 1440
containerWidth: 1425
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: true
headingPx: 34
bodyPx: 18
sectionPaddingX: 0
coverage:
statesFound: 25
gradientsFound: 0
rolesUnassigned: 5
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
The Folio Society design system embodies refined literary elegance with a timeless, sophisticated approach. The aesthetic balances minimalist restraint with curated moments of visual richness—white space and monochromatic foundations provide clarity and focus, while thoughtfully composed book imagery and subtle colour accents convey the brand's heritage and cultural authority. The visual language prioritizes legibility and intentionality, treating each element with the discipline of a carefully bound volume. Typography is classical and serif-driven, evoking the permanence of print, while interactions remain understated and precise. The overall mood is calm, intellectual, and deeply invested in the artifact of the book itself.
Key Characteristics
#212121) anchors brand identity, with minimal chromatic accents{rounded.xs} — 4px) emphasizes precision and control{colors.primary} — #212121): The defining brand accent, used for primary CTAs, body copy, active states, and the brand mark. This near-black serves as the visual anchor across all interactive and textual elements.{colors.accent-1} — #6C896D): Decorative muted green, no specific semantic role; used to introduce subtle warmth and cultural texture to editorial compositions.{colors.accent-2} — #100F0E): Decorative ultra-dark tone, slightly warmer than primary; reserves for nuanced depth accents where the brand black might feel too stark.{colors.accent-3} — #007AFF): Decorative system blue, no measured role; held in reserve for future interactive or status applications.{colors.canvas} — #000000): Default page background; establishes the dark, gallery-like visual foundation typical of luxury editorial sites.{colors.surface-alt} — #F9F9F9): Alternating section band and footer background; provides gentle visual breathing between content blocks without high contrast.{colors.ink} — #999999): Headings and primary text; introduces tonal variation for visual hierarchy while maintaining the monochromatic aesthetic.{colors.neutral-1} — #CACACA): Mid-gray secondary text and borders; used for captions, labels, and hairlines that require softness without invisibility.{colors.neutral-2} — #EBEBEB): Lightest neutral; reserved for delicate borders, dividers, and form field states where maximum lightness serves clarity.Primary (Display & Headings): freight-display-pro, serif fallback stack (Georgia, serif)
Secondary (UI & Body): neue-haas-unica, humanist sans-serif fallback stack (Segoe UI, Tahoma, sans-serif)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Hero | freight-display-pro | 34px | 500 | 1.4 | 0px | {typography.heading-md}; used for major section headings, sets powerful entry points |
| Heading Large | freight-display-pro | 28px | 500 | 1.4 | 0px | {typography.heading-sm}; secondary headings, subsection openers |
| Heading Medium | freight-display-pro | 20px | 400 | 1 | 0px | {typography.heading-xs}; tertiary headings, card titles |
| Button XL | freight-display-pro | 24px | 500 | 1.4 | 0px | {typography.button-xl}; large hero CTAs, prominent calls-to-action |
| Body Large | neue-haas-unica | 18px | 350 | 1.33 | 0px | {typography.body-lg}; editorial body copy, rich content blocks |
| Body Large Strong | neue-haas-unica | 18px | 700 | 1.33 | 0px | {typography.body-lg-strong}; emphasized body text, inline highlights |
| Body Default | neue-haas-unica | 16px | 400 | 1 | 0px | {typography.body-md} (freight link variant); standard link text, default prose |
| Body Medium | neue-haas-unica | 14.4px | 350 | 1.4 | 0.4px | {typography.body-sm}; uppercase labels and UI accents, navigation breadcrumbs |
| Body Small | neue-haas-unica | 14px | 350 | 1.4 | 0px | {typography.body-xs}; standard UI text, form labels, helper text |
| Body Small Strong | neue-haas-unica | 14px | 400 | 1.4 | 0px | {typography.body-xs-strong}; emphasized small text, callouts |
| Button Large | neue-haas-unica | 20px | 400 | not measured | 0px | {typography.button-lg}; large interactive buttons |
| Button Medium | neue-haas-unica | 16px | 400 | not measured | 0px | {typography.button-md}; standard button text |
| Button Small | neue-haas-unica | 14px | 400 | 1.86 | 1px | {typography.button-sm}; compact buttons, uppercase text-transform |
| Caption XS | neue-haas-unica | 12px | 350 | 1.4 | 0px | {typography.caption-xs}; fine print, footnotes, metadata |
| Caption XS Uppercase | neue-haas-unica | 12px | 350 | 1.3 | 0.5px | {typography.caption-xs-uppercase}; uppercase labels, tags, uppercase small copy |
{colors.primary} (#212121)#FFFFFF{typography.button-md}){rounded.xs} (4px)box-shadow: currentcolor 0px -2px 0px inset (inset top border accent){colors.primary} (#212121)#FFFFFF{typography.button-xl}){rounded.full} (20px / pill shape)#FFFFFF{colors.primary} (#212121){typography.button-md}){rounded.xs} (4px)#FFFFFF{typography.body-lg}){rounded.none} (0px){colors.primary} (#212121){rounded.none} (0px){typography.heading-xs}){colors.primary} (#212121){typography.body-md}){rounded.none} (0px){colors.primary} (#212121){typography.body-md})color: var(--atomic-color-6) (maintains brand tone)outline: currentcolor solid 1px (visible accessible focus ring)#FFFFFF{typography.button-sm})color: var(--atomic-color-w) (white maintained on light text){colors.neutral-2} (#EBEBEB){colors.primary} (#212121){typography.body-sm}){colors.primary} (#212121){typography.body-xs-strong}){colors.primary} (#212121){typography.button-xl}){rounded.none} (0px){colors.primary} (#212121){typography.label})focus: transform: rotate(180deg) (custom rotate on interaction)box-shadow: white 0px 0px 0px 30px inset (large inset white glow)background-color: var(--atomic-color-51) (background shift on hover){colors.surface-alt} (#F9F9F9){colors.primary} (#212121){typography.body-md}){rounded.none} (0px)Base unit: {spacing.xs} (8px). The system scales in even increments:
{spacing.xxs} (4px) — Icon-to-text, tight component gaps{spacing.xs} (8px) — Button internal padding, small component margins{spacing.sm} (12px) — Form field spacing, list item gutters{spacing.md} (16px) — Card padding, standard section gutters{spacing.lg} (20px) — Component outer margins, breathing room{spacing.xl} (24px) — Major section separation{spacing.xxl} (32px) — Hero-to-content transition{spacing.xxxl} (36px) — Subsection vertical rhythm{spacing.section} (40px) — Major block spacing, gallery-like divisions{spacing.band} (44px) — Full-width section paddingUsage Context:
{spacing.xs} to {spacing.md}{spacing.md} to {spacing.lg}{spacing.section} to {spacing.band}{spacing.lg} to {spacing.xl}{colors.canvas}) and light surface alt ({colors.surface-alt}), creating gallery rhythmWhitespace is treated as a design material equal to colour and typography. Large negative space around imagery and headings mirrors the white margin of a carefully bound book. Section transitions use full-width background colour shifts to signify movement without visual harshness. Internal component spacing (button padding, card margins) is generous—never cramped—reflecting an editorial bias toward breathing room over density.
{rounded.none} (0px) — All card containers, navigation, footer, images; the system defaults to sharp geometry{rounded.xs} (4px) — Button corners only; subtle softening on interactive surfaces{rounded.full} (9999px / pill shape) — Small icon buttons and badge containers; used sparingly for accent interactivity| Level | Treatment | Use |
|---|---|---|
| Flat (Base) | No shadow, transparent background, 0px border | Default: cards, navigation, text links, badges |
| Overlay / Inset Lift (Hover) | box-shadow: currentcolor 0px -2px 0px inset | Button hover state; inset top accent only |
| Glow (Focus / Input) | box-shadow: white 0px 0px 0px 30px inset | Input field hover; large inset white glow for contrast |
Shadow Philosophy:
The Folio Society design system eschews traditional drop shadows entirely. Depth is communicated through color-blocking—alternating full-width sections between dark canvas (#000000) and light surface (#F9F9F9)—and through inset accents on interactive elements. This approach keeps the visual hierarchy flat and editorial, prioritizing content legibility over spatial recession. Focus states use outline and inset shadows for accessibility, not aesthetic depth.
{rounded.xs} (4px) consistently to all button states; do not round navigation or card containers.{spacing.lg} to {spacing.band} between major sections; never compress content.text-transform: uppercase for button labels, captions, and form metadata only; body and headings use sentence case.outline: currentcolor solid 1px on :focus-visible for WCAG AA compliance.box-shadow: currentcolor 0px -2px 0px inset on button hover to signal interactivity subtly.{rounded.none} (0px); softening the edges dilutes the refined, editorial aesthetic.{colors.accent-1}, {colors.accent-2}, or {colors.accent-3} as error/success/warning colours; they are decorative only and have no measured semantic meaning.line-height: 1.4 on 28–34px headings to preserve serif elegance; never compress.outline: none without providing a visible alternative; all interactive elements must be keyboard-accessible.| Viewport | Content Width | Layout Shift | Nav Behavior | Heading Size | Body Text | Section Padding X |
|---|---|---|---|---|---|---|
| 375px (Mobile) | 360px | Single column, stacked | Menu toggle visible | 34px | 14px ({typography.body-xs}) | 0px |
| 768px (Tablet) | 753px | Single column | Menu toggle visible | 34px | 18px ({typography.body-lg}) | 0px |
| 1024px (Desktop) | 1009px | Single column | Menu toggle visible | 34px | 18px ({typography.body-lg}) | 0px |
| 1280px (Large Desktop) | 1265px | Single column | Menu toggle visible | 34px | 18px ({typography.body-lg}) | 0px |
| 1440px (XL Desktop) | 1425px | Single column | Menu toggle visible | 34px | 18px ({typography.body-lg}) | 0px |
{typography.body-xs}, 14px) to maximize readability in constrained space.{typography.body-lg} (18px); navigation remains hidden behind menu toggle. No layout shift; content width increases but column count stays 1.#212121) — dark near-black used for buttons, links, and brand mark#000000) — pure black for main content area, creating gallery-like foundation#F9F9F9) — off-white for alternating sections and footer, provides breathing room#999999) — mid-gray for hierarchy, reserves pure brand black for interactive elements only#CACACA) — lighter gray for captions, labels, hairlines#EBEBEB) — palest neutral for delicate borders and form states#6C896D), Deep Charcoal (#100F0E), Electric Blue (#007AFF) — no measured semantic roles; hold in reserve#212121) with white text; secondary buttons are white with black text. Both use {rounded.xs} (4px) and have no border. Hover adds inset 0px -2px 0px accent shadow only.{spacing.section} (40px) to major section top/bottom; use {spacing.md} (16px) for card internal padding; use {spacing.lg} (20px) between logical groups. Never compress.{spacing.lg} on all sides); treat whitespace as a design material, not wasted room.border-radius: 0px. Only small icon buttons and badge pills round to 9999px (full pill shape).outline: currentcolor solid 1px on :focus-visible. Use :hover states sparingly; rely on focus rings for discoverability.freight-display-pro, 16px, black or white depending on background). Buttons are sans (neue-haas-unica, 16–20px). Do not blur these roles.opacity: 0.4 to disabled buttons and inactive text. Use opacity: 0 on transparent backgrounds (badges, cards, text buttons). Do not invent opacity values; use only 0.4 or 1.0.{colors.accent-1}, {colors.accent-2}, {colors.accent-3}) have no measured semantic role and should be treated as decorative only.{colors.surface-alt} — #F9F9F9) was observed as a derived calculation, not an intentional brand delivery. Do not assume a shipped dark mode.