Remixes of standardebooks.org
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: Standardebooks
description: |
Standard Ebooks embodies a literary, carefully curated aesthetic rooted in
classical book design and typographic craftsmanship. The visual language
balances intellectual heritage with digital accessibility, using a warm,
off-white canvas anchored by a sophisticated teal accent. The color story
draws from vintage book spines and aged paper, while the typography alternates
between modern geometric sans-serif (League Spartan) and elegant classical
serif (Crimson Pro) to evoke both the timelessness of literature and the
clarity of contemporary digital interfaces. Generous whitespace and deliberate
color-blocking create depth without visual noise, establishing a sense of
quiet authority and respect for the reader's attention. The system privileges
legibility and breathing room, reflecting the mission of producing
professionally-formatted ebooks for discerning readers.
source:
url: "https://standardebooks.org"
pagesAnalyzed: 1
extractedAt: 2026-10-21
tokensMeasured: true
colors:
primary: "#4F9D85"
canvas: "#E9E7E0"
surface-alt: "#394451"
on-primary: "#FFFFFF"
ink: "#222222"
body: "#333333"
muted: "#FFFFFF"
hairline: "#000000"
typography:
display-lg:
fontFamily: "League Spartan"
fontSize: 61.6px
fontWeight: 700
lineHeight: 1.2
letterSpacing: 1px
display-md:
fontFamily: "Crimson Pro"
fontSize: 48.4px
fontWeight: 400
lineHeight: 1.2
letterSpacing: 0px
display-sm:
fontFamily: "League Spartan"
fontSize: 44px
fontWeight: 700
lineHeight: 1.2
letterSpacing: 0px
body-xl:
fontFamily: "League Spartan"
fontSize: 22px
fontWeight: 400
lineHeight: 1.2
letterSpacing: 0px
textTransform: lowercase
body-lg:
fontFamily: "Crimson Pro"
fontSize: 19.8px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
textTransform: lowercase
body-md:
fontFamily: "Crimson Pro"
fontSize: 19.36px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-md-lowercase:
fontFamily: "Crimson Pro"
fontSize: 19.36px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
textTransform: lowercase
body-sm:
fontFamily: "Crimson Pro"
fontSize: 13.2px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
nav:
fontFamily: "League Spartan"
fontSize: 16.5px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 1px
textTransform: uppercase
rounded:
none: 0px
xs: 5px
spacing:
xxs: 24px
xs: 32px
sm: 44px
md: 88px
lg: 128px
xl: 132px
elevationStrategy: color-blocking
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#E9E7E0"
surface: "#394451"
surfaceRaised: "#38434F"
text: "#222222"
textMuted: "#333333"
border: "#000000"
accent: "#488F7A"
accentFg: "#000000"
focusRing: "#4F9D85"
elevation: shadow
dark:
bg: "#0D1111"
surface: "#1C1F1F"
surfaceRaised: "#282B2B"
text: "#F8FBFA"
textMuted: "#9FA2A1"
border: "#343737"
accent: "#4F9D85"
accentFg: "#0B0B0C"
focusRing: "#4F9D85"
elevation: "border+surface"
contrastFailures:
- "light: text on surface = 1.61:1 (needs 4.5:1)"
components:
navigation:
textColor: "{colors.ink}"
height: 34.75px
fontSize: 0px
fontFamily: "League Spartan"
fontWeight: 400
lineHeight: 0px
footer:
typography: "{typography.body-md}"
textColor: "{colors.ink}"
border: "3px double rgb(102, 102, 102)"
padding: "22px 0px 44px 0px"
link:
typography: "{typography.body-xl}"
textColor: "{colors.muted}"
border: "1px solid rgba(0, 0, 0, 0.5)"
padding: "22px 44px 22px 44px"
boxShadow: "rgba(0, 0, 0, 0.5) 2px 2px 0px 0px, rgba(255, 255, 255, 0.5) 1px 1px 0px 0px inset"
rounded: "{rounded.xs}"
backgroundColor: "{colors.primary}"
link-sm:
textColor: "{colors.muted}"
fontSize: 0px
fontFamily: "Crimson Pro"
fontWeight: 400
lineHeight: 0px
states:
other-hover:
target: other
state: hover
opacity: 1
link-focus:
target: link
state: focus
outline: "{colors.on-primary} dashed 1px"
outlineColor: "{colors.muted}"
outlineWidth: 1px
link-hover:
target: link
state: hover
transform: "scale(1.025) rotate(1deg)"
nav-hover:
target: nav
state: hover
textColor: "{colors.muted}"
input-focus:
target: input
state: focus
outline: none
other-focus:
target: other
state: focus
outline: "{colors.on-primary} dashed 1px"
outlineColor: "{colors.muted}"
outlineWidth: 1px
button-active:
target: button
state: active
boxShadow: none
button-hover:
target: button
state: hover
backgroundColor: firebrick
link-active:
target: link
state: active
boxShadow: none
transform: "scale(1.025)"
input-hover:
target: input
state: hover
backgroundColor: "rgba(0, 0, 0, 0.1)"
breakpoints:
- width: 375
containerWidth: 367
gridColumns: 5
navLinksVisible: 6
menuToggleVisible: false
headingPx: 48
bodyPx: 19
sectionPaddingX: 0
- width: 768
containerWidth: 680
gridColumns: 6
navLinksVisible: 6
menuToggleVisible: false
headingPx: 62
bodyPx: 19
sectionPaddingX: 0
- width: 1024
containerWidth: 936
gridColumns: 6
navLinksVisible: 6
menuToggleVisible: false
headingPx: 62
bodyPx: 19
sectionPaddingX: 0
- width: 1280
containerWidth: 1192
gridColumns: 6
navLinksVisible: 6
menuToggleVisible: false
headingPx: 62
bodyPx: 19
sectionPaddingX: 0
- width: 1440
containerWidth: 1352
gridColumns: 6
navLinksVisible: 6
menuToggleVisible: false
headingPx: 62
bodyPx: 19
sectionPaddingX: 0
coverage:
statesFound: 37
gradientsFound: 0
rolesUnassigned: 0
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
Standard Ebooks embodies a literary, carefully curated aesthetic rooted in classical book design and typographic craftsmanship. The visual language balances intellectual heritage with digital accessibility, using a warm, off-white canvas anchored by a sophisticated teal accent. The color story draws from vintage book spines and aged paper, while the typography alternates between modern geometric sans-serif (League Spartan) and elegant classical serif (Crimson Pro) to evoke both the timelessness of literature and the clarity of contemporary digital interfaces. Generous whitespace and deliberate color-blocking create depth without visual noise, establishing a sense of quiet authority and respect for the reader's attention. The system privileges legibility and breathing room, reflecting the mission of producing professionally-formatted ebooks for discerning readers.
Key Characteristics
{colors.primary} — #4F9D85){rounded.xs} — 5px) on interactive elements{colors.primary} — #4F9D85): Primary call-to-action buttons, brand accent, active state indicators, and interactive highlights. A sophisticated teal that evokes both natural serenity and literary sophistication.{colors.canvas} — #E9E7E0): Default page background. A warm off-white with subtle beige undertones, evoking aged paper and providing maximum legibility contrast.{colors.surface-alt} — #394451): Alternating section band and background for hero areas. A deep charcoal-blue that creates visual separation and hosts white or light text.{colors.ink} — #222222): Primary text color for headings and top-level hierarchy. Near-black with minimal contrast loss against the canvas.{colors.body} — #333333): Body copy and descriptive text. Slightly lighter than ink for reading comfort over long passages.{colors.on-primary} — #FFFFFF): Text, icons, and labels rendered on primary-colored surfaces. Pure white for maximum contrast against the teal accent.{colors.hairline} — #000000): 1px borders and structural dividers. Used sparingly; absolute black provides crisp definition when needed.Primary Font: League Spartan
League Spartan, Arial, Helvetica, sans-serifSecondary Font: Crimson Pro
Crimson Pro, Georgia, 'Times New Roman', serif| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Large | League Spartan | 61.6px | 700 | 1.2 | 1px | Hero headlines; dramatic, measured spacing |
| Display Medium | Crimson Pro | 48.4px | 400 | 1.2 | 0px | Secondary headings; classical emphasis |
| Display Small | League Spartan | 44px | 700 | 1.2 | 0px | Tertiary headings; strong hierarchy markers |
| Navigation | League Spartan | 16.5px | 400 | 1.5 | 1px | Menu links; uppercase, widely spaced |
| Body XL | League Spartan | 22px | 400 | 1.2 | 0px | Large body emphasis; lowercase styling |
| Body Large | Crimson Pro | 19.8px | 400 | 1.5 | 0px | Links and callouts; lowercase styling |
| Body Medium | Crimson Pro | 19.36px | 400 | 1.5 | 0px | Primary body text; default reading size |
| Body Medium (Compact) | Crimson Pro | 19.36px | 400 | 1.0 | 0px | Condensed body; reduced line height |
| Body Small | Crimson Pro | 13.2px | 400 | 1.5 | 0px | Captions, metadata, fine print |
Primary Button
{colors.primary} (#4F9D85){colors.on-primary} (#FFFFFF){rounded.xs} (5px)rgba(0, 0, 0, 0.5)rgba(0, 0, 0, 0.5) 2px 2px 0px 0px, rgba(255, 255, 255, 0.5) 1px 1px 0px 0px insetvar(--button-highlight))var(--input-outline)Text Link (Default)
{colors.on-primary} (#FFFFFF) on dark surfaces; {colors.ink} (#222222) on light surfacestransform: scale(1.05) with optional box-shadow: rgba(0, 0, 0, 0.25) 3px 3px 1pxvar(--light-highlight) or var(--input-outline)transform: scale(1.025) with shadow removedrgba(0, 0, 0, 0)){colors.ink} (#222222) defaultrgb(255, 255, 255), text-decoration removed{rounded.none} — 0px)rgba(0, 0, 0, 0)){colors.ink} (#222222)#666666{rounded.none} — 0px)The spacing system uses a measured base unit of approximately 24px, scaled in incremental steps:
{spacing.xxs} — 24px: Small gaps between compact elements{spacing.xs} — 32px: Padding around cards and contained sections{spacing.sm} — 44px: Standard section padding and medium-sized gaps{spacing.md} — 88px: Breathing room between major content blocks{spacing.lg} — 128px: Large vertical sections and hero regions{spacing.xl} — 132px: Maximum spacing for dramatic visual hierarchyUsage Context: Small inline elements and form inputs use {spacing.xxs}; card-like containers and buttons use {spacing.xs} to {spacing.sm}; section dividers and major layout gaps use {spacing.md} to {spacing.xl}.
{colors.surface-alt} or {colors.canvas}) with centered text content insideWhitespace is treated as an active design material, not leftover space. Large vertical gaps ({spacing.md} to {spacing.xl}) separate major content sections, creating visual breathing room and guiding the eye through narrative flow. Horizontal whitespace is used conservatively; the design favors full-width color blocks and centered content over narrow columns. This approach echoes book design principles where margins and inter-chapter spacing enhance readability and pacing.
{rounded.none} — 0px: Navigation, footers, section backgrounds, and structural elements. Sharp corners reinforce architectural clarity.{rounded.xs} — 5px: Interactive elements only. Buttons and images receive minimal rounding for a refined, restrained appearance.3px double on footer). Used sparingly for definition.The system employs color-blocking rather than traditional layered shadows. Depth is achieved through strategic shifts in background color, not shadow stacking.
| Level | Treatment | Use |
|---|---|---|
| Base / Canvas | {colors.canvas} — #E9E7E0 | Default page background; primary reading surface |
| Section Band | {colors.surface-alt} — #394451 | Hero areas, alternating sections; reverses text color to white |
| Interactive | {colors.primary} — #4F9D85 | Primary CTA surfaces; hosts white text |
| Accents | rgba(0, 0, 0, 0.5) 2px 2px 0px + inset white highlight | Button shadow pair creates subtle 3D lift (applied only to primary buttons) |
Shadow Philosophy: The system avoids drop shadows entirely on structural elements. Buttons receive a combined shadow treatment: a 2px offset dark shadow (rgba(0, 0, 0, 0.5)) paired with a subtle inset highlight (rgba(255, 255, 255, 0.5) 1px 1px inset). This creates visual lift through contrast rather than blur, maintaining crispness and legibility. Hover states may introduce additional shadows on specific interactive elements (e.g., rgba(0, 0, 0, 0.25) 3px 3px 1px on link hover), but these are animation accents, not structural elevation.
Opacity values are embedded in specific color usages rather than defined as a global scale:
rgba(0, 0, 0, 0) — Transparent background for navigation and footer containersrgba(0, 0, 0, 0.1) — Input background on hover (subtle highlight)rgba(0, 0, 0, 0.5) — Button border and outer shadow (semi-transparent dark)rgba(255, 255, 255, 0.5) — Inset button highlight (semi-transparent white)No global disabled or overlay opacity scale was extracted; these states are not declared in the measured stylesheets.
No other z-index layers were measured. Modals, dropdowns, and tooltips are not present in the captured page.
{colors.canvas} — #E9E7E0) as the default background for maximum warmth and readability contrast.{colors.primary} — #4F9D85) exclusively for primary CTAs, active states, and brand-critical moments. Overuse dilutes impact.{spacing.md} to {spacing.xl}) between major sections to create rhythm and guide narrative flow.{rounded.xs}) for a refined, restrained appearance.#000000) liberally. Reserve 1px borders for structural dividers (footer) and subtle outlines only.| Breakpoint | Viewport Width | Content Column | Grid Columns | Heading Size (Display Large) | Body Size | Navigation Visible | Notes |
|---|---|---|---|---|---|---|---|
| Mobile | 375px | 367px | 5 | 48px | 19px | Yes (6 links) | Compact layout; full-width sections |
| Tablet | 768px | 680px | 6 | 62px | 19px | Yes (6 links) | Expanded content area; consistent nav |
| Desktop | 1024px | 936px | 6 | 62px | 19px | Yes (6 links) | Full grid available; no collapse |
| Desktop Large | 1280px | 1192px | 6 | 62px | 19px | Yes (6 links) | Maximum comfortable reading width |
| Desktop XL | 1440px | 1352px | 6 | 62px | 19px | Yes (6 links) | Largest measured viewport |
Breakpoint Strategy: The design does not employ a traditional mobile-first collapse pattern. Navigation remains visible and fully expanded across all measured viewports (375px–1440px). Heading sizes increase from 48px at mobile to 62px at tablet and remain fixed at tablet breakpoint and above. The grid maintains 6 columns at tablet and up, reducing to 5 columns only at the smallest mobile viewport. Content column width scales linearly with viewport, maintaining proportional padding and breathing room.
No explicit touch target sizes were extracted from the measured stylesheets. The primary interactive element (button) measures approximately 73px tall with 22px vertical padding, comfortably exceeding standard 44–48px minimum touch target recommendations. Navigation links inherit the 16.5px font size but benefit from surrounding whitespace for easy selection.
The captured page shows no hamburger menu toggle or navigation collapse across any viewport. All six navigation links remain visible and accessible from 375px (mobile) through 1440px (desktop). If a collapse is required below 375px or above 1440px, this document does not provide that data. Vertical sections stack in single-column layout at mobile (375px column width) and expand proportionally, with no change to section structure or order. Images and content blocks scale responsively within their containers; the large hero image compresses but remains visible on mobile.
#4F9D85) — use for main buttons, active states, and hero accents#E9E7E0) — warm off-white for default reading surface#394451) — deep charcoal-blue for alternating sections and hero areas; reverses text to white#222222) — near-black for maximum contrast on canvas#333333) — readable body text, slightly lighter than ink#FFFFFF) — white text for all content on teal or dark backgrounds#000000) — sharp black for 1px structural borders; use sparinglyUse a dual-font system: League Spartan (geometric sans-serif) for navigation, buttons, and UI labels with 1px letter-spacing and uppercase styling; Crimson Pro (classical serif) for all body text, headings, and editorial content with standard case. Never reverse these roles.
Color-block for depth: Replace drop shadows with strategic background color shifts. Primary surface is warm canvas (#E9E7E0); alternate sections or hero areas use the dark blue-gray (#394451), which automatically reverses text to white. This creates visual separation without shadow bulk.
Maintain generous spacing: Minimum gaps between sections should be {spacing.md} (88px) or larger. Tighter spacing reads cluttered and betrays the brand's literary, unhurried aesthetic. Use {spacing.xl} (132px) for the most dramatic section breaks.
Button treatment is specific: Primary buttons combine teal background (#4F9D85), white text, 1px solid border, and a shadow pair (2px dark offset + inset white highlight). Hover triggers background change; no shadow removal on hover. Border radius is consistently 5px ({rounded.xs}).
Navigation is always visible and clear: 16.5px League Spartan, uppercase, 1px letter-spacing, 0px padding on container, no background color. On hover, text color goes white (#FFFFFF). Z-index 100 for sticky positioning.
Responsive scaling is linear: Heading sizes step up from 48px (mobile 375px) to 62px (tablet 768px+) and remain fixed above. Content width scales proportionally with viewport; sections remain full-width with color-blocking. No navigation collapse was observed; maintain all links across all breakpoints.
Interactive radius is minimal: Only buttons and images receive border-radius. Use 5px ({rounded.xs}) for buttons; 5px for images. All structural elements (sections, containers, nav, footer) use 0px radius ({rounded.none}). This preserves sharp architectural clarity.
Focus and hover states are measured: Links scale up 1.05x–1.1x on hover with optional shadow; buttons darken on hover and gain dashed outline on focus. Inputs remove outline on focus but gain background color change on hover. Implement exactly as extracted; do not invent additional hover effects.
Typography hierarchy is fixed: Do not create new display or body sizes. Map all text to the defined roles: Display Large (61.6px, 1px tracking), Display Medium (48.4px), Display Small (44px), Navigation (16.5px, 1px tracking, uppercase), Body XL (22px, lowercase), Body Large (19.8px), Body Medium (19.36px), Body Small (13.2px). Consistency across the system depends on this discipline.
Grid and layout are structure-agnostic: The 6-column grid (5 at mobile) is a measurement guide, not a rigid framework. Use it as a reference for alignment and spacing rhythm. Sections can be full-width with centered content, contributing to the visual cohesion and book-like flow.
No semantic color ramp: The site does not declare error, success, warning, or info states in its markup. No red, green, yellow, or blue status colors were extracted. If these roles are needed, they must be designed and added to the system separately; do not invent them here.
No gradient or decorative meshes: The color palette is flat and solid. No gradients, mesh backgrounds, or decorative overlays were observed. If the design requires these, they are not part of the measured system.
Interaction states are partial: The extracted stylesheet includes various hover, focus, and active states (scale transforms, opacity changes, shadow additions, color shifts), but not all interactions on every element. Specifically:
Single-page extraction: Only the homepage (https://standardebooks.org) was analyzed. Navigation to other pages (EBOOKS, ABOUT, NEWSLETTER, BLOG, GET INVOLVED, DONATE), authenticated surfaces, or dynamic content may expose additional colors, typography roles, or component patterns not reflected here.
No shadow or depth scale: The system uses color-blocking for elevation, not layered shadows. A single shadow treatment appears on primary buttons; no graduated shadow ladder or elevation system (e.g., "shadow-sm", "shadow-md", "shadow-lg") was extracted. Opacity levels are embedded in specific color usages, not defined as a reusable scale.
Animations and transitions: No CSS animation duration, easing function, or transition timing was extracted. The hover and focus states exist, but their animation curves and duration are not documented.
Dark mode / derived themes: The extraction noted that only one theme (light) was measured; no dark mode variant or CSS custom property overrides for a second theme were captured. The system as documented is light-mode only.
Component variants beyond measured examples: Buttons, links, navigation, and footer are documented based on what was extracted. Additional component types (modals, dropdowns, tooltips, tabs, cards with specific internal states) are not present in the homepage capture and are not documented here.
Exact link highlight color: The extracted stylesheet references var(--link-highlight) and var(--light-highlight) in hover and focus rules, but the actual hex values of these CSS custom properties are not defined in the extraction data. Implementation may require consulting the full stylesheet or design tokens file.