Remixes of ellipsus.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: Ellipsus
description: |
Ellipsus embodies a refined, literary aesthetic that elevates the everyday act
of writing into something purposeful and elegant. The design system is
anchored in a striking contrast between deep, sophisticated darks and clean,
inviting light surfaces, with carefully placed moments of vibrant color that
evoke creativity and human warmth. The visual language prioritizes clarity and
restraint—generous whitespace, elegant serif display typefaces paired with
modern sans-serif body text, and a deliberately restrained color palette that
lets content breathe. This is not a playful, extroverted system; it is
contemplative, confident, and unapologetically focused on the writer's craft.
Decorative geometric elements (subtle letter backgrounds, minimalist
iconography) reinforce the literary identity without overwhelming. The overall
impression is one of professional sophistication married to genuine care for
the user's creative process.
source:
url: "https://ellipsus.com/"
pagesAnalyzed: 6
extractedAt: 2026-10-11
tokensMeasured: true
colors:
primary: "#0C0D0D"
accent: "#C455EB"
link: "#EB5B55"
canvas: "#F4F4F2"
surface: "#FFFFFF"
surface-alt: "#1D1E20"
on-primary: "#FFFFFF"
ink: "#282825"
body: "#64645E"
muted: "#8F8F89"
faint: "#FFFFFF"
hairline: "#2173BE"
accent-1: "#529A6A"
accent-2: "#020203"
accent-3: "#F09236"
accent-4: "#56C87C"
accent-5: "#FFAD5C"
neutral-1: "#C5C5BA"
typography:
display-xxl:
fontFamily: "Roslindale Display Narrow"
fontSize: 96px
fontWeight: 300
letterSpacing: 0px
display-xl:
fontFamily: "Roslindale Display Narrow"
fontSize: 80px
fontWeight: 300
letterSpacing: 0px
display-lg:
fontFamily: "Roslindale Display Narrow"
fontSize: 64px
fontWeight: 300
letterSpacing: 0px
display-md:
fontFamily: "Roslindale Display Narrow"
fontSize: 60px
fontWeight: 300
letterSpacing: 0px
display-sm:
fontFamily: "Roslindale Display Narrow"
fontSize: 40px
fontWeight: 300
lineHeight: 1.2
letterSpacing: 0px
display-sm-strong:
fontFamily: Manrope
fontSize: 40px
fontWeight: 400
lineHeight: 1.2
letterSpacing: 0px
heading-md:
fontFamily: "Roslindale Display Narrow"
fontSize: 32px
fontWeight: 300
letterSpacing: 0px
heading-md-strong:
fontFamily: Manrope
fontSize: 32px
fontWeight: 400
lineHeight: 1.34
letterSpacing: 0px
heading-sm:
fontFamily: Manrope
fontSize: 28px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
heading-xs:
fontFamily: Manrope
fontSize: 18px
fontWeight: 400
lineHeight: 1.44
letterSpacing: 0px
body-xl:
fontFamily: Manrope
fontSize: 24px
fontWeight: 400
letterSpacing: 0px
body-lg:
fontFamily: Manrope
fontSize: 20px
fontWeight: 400
letterSpacing: 0px
body-md:
fontFamily: Manrope
fontSize: 16px
fontWeight: 500
lineHeight: 1.13
letterSpacing: 0px
body-sm:
fontFamily: Manrope
fontSize: 14px
fontWeight: 400
letterSpacing: 0px
body-sm-uppercase:
fontFamily: Manrope
fontSize: 14px
fontWeight: 400
letterSpacing: 0px
textTransform: uppercase
body-sm-strong:
fontFamily: Manrope
fontSize: 14px
fontWeight: 700
letterSpacing: 0px
textTransform: uppercase
button:
fontFamily: "Roslindale Display Narrow"
fontSize: 30px
fontWeight: 400
lineHeight: 0.85
letterSpacing: 0px
label-md:
fontFamily: Arial
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
label-sm:
fontFamily: Arial
fontSize: 13.3333px
fontWeight: 400
letterSpacing: 0px
label-xs:
fontFamily: Manrope
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
letterSpacing: 0px
caption-xs:
fontFamily: Manrope
fontSize: 12px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
caption-xs-strong:
fontFamily: Manrope
fontSize: 12px
fontWeight: 500
lineHeight: 1.17
letterSpacing: 0px
caption-xs-uppercase:
fontFamily: Manrope
fontSize: 12px
fontWeight: 600
lineHeight: 1
letterSpacing: 0px
textTransform: uppercase
caption-xs-2:
fontFamily: Manrope
fontSize: 12px
fontWeight: 600
lineHeight: 1
letterSpacing: 0.48px
textTransform: uppercase
caption-xs-3:
fontFamily: Manrope
fontSize: 12px
fontWeight: 700
letterSpacing: 0px
rounded:
none: 0px
xs: 4px
sm: 8px
md: 12px
lg: 16px
xl: 30px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 40px
section: 60px
band: 64px
borderWidths:
thin: 1px
shadows:
sm: "rgba(0, 0, 0, 0.05) 0px 2px 14px 0px, rgba(0, 0, 0, 0.05) 0px 2px 8px 0px"
md: "rgba(44, 45, 48, 0.04) 0px 6px 24px 0px, rgba(44, 45, 48, 0.04) 0px 0px 24px 0px"
elevationStrategy: progressive
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#F4F4F2"
surface: "#FFFFFF"
surfaceRaised: "#F6F6F6"
text: "#282825"
textMuted: "#64645E"
border: "#2173BE"
accent: "#C455EB"
accentFg: "#000000"
focusRing: "#C455EB"
elevation: shadow
dark:
bg: "#110B13"
surface: "#1F1A21"
surfaceRaised: "#2B262D"
text: "#FDF8FE"
textMuted: "#A39EA5"
border: "#373239"
accent: "#C455EB"
accentFg: "#0B0B0C"
focusRing: "#C455EB"
elevation: "border+surface"
gradients:
- context: section
kind: linear
value: "linear-gradient(rgb(41, 42, 46), rgb(70, 70, 105))"
components:
button-filled:
typography: "{typography.body-md}"
textColor: "{colors.ink}"
height: 42px
padding: "12px 16px 12px 16px"
rounded: "{rounded.md}"
backgroundColor: "{colors.surface}"
button-primary:
typography: "{typography.body-md}"
textColor: "{colors.faint}"
height: 42px
padding: "12px 16px 12px 16px"
rounded: "{rounded.md}"
backgroundColor: "{colors.primary}"
button-icon:
textColor: "{colors.faint}"
height: 64px
fontSize: 16px
fontFamily: Manrope
fontWeight: 400
rounded: 80px
backgroundColor: "{colors.link}"
button-icon-2:
textColor: "{colors.ink}"
height: 64px
fontSize: 16px
fontFamily: Manrope
fontWeight: 400
rounded: 80px
backgroundColor: "{colors.canvas}"
navigation:
textColor: "{colors.ink}"
height: 74px
padding: "0px 64px 0px 64px"
fontSize: 16px
fontFamily: Manrope
fontWeight: 400
backgroundColor: "{colors.canvas}"
link:
textColor: "{colors.ink}"
padding: "16px 0px 16px 0px"
fontSize: 16px
fontFamily: Manrope
fontWeight: 400
link-sm:
typography: "{typography.body-md}"
textColor: "{colors.ink}"
padding: "12px 16px 12px 16px"
rounded: "{rounded.md}"
badge-text:
typography: "{typography.caption-xs-uppercase}"
textColor: "{colors.ink}"
height: 20px
padding: "4px 8px 4px 8px"
rounded: "{rounded.xs}"
card:
textColor: "{colors.ink}"
border: "1px solid {colors.neutral-1}"
padding: "24px 24px 24px 24px"
fontSize: 16px
fontFamily: Manrope
fontWeight: 400
rounded: "{rounded.lg}"
backgroundColor: "{colors.surface}"
card-lg:
textColor: "{colors.ink}"
border: "1px solid {colors.hairline}"
padding: "24px 24px 16px 24px"
fontSize: 16px
boxShadow: "rgba(0, 0, 0, 0.05) 0px 2px 14px 0px, rgba(0, 0, 0, 0.05) 0px 2px 8px 0px"
fontFamily: Manrope
fontWeight: 400
rounded: "{rounded.lg}"
backgroundColor: "{colors.surface}"
states:
other-focus:
target: other
state: focus
outline: none
other-hover:
target: other
state: hover
textColor: transparent
outline: none
backgroundColor: transparent
button-hover:
target: button
state: hover
outline: none
breakpoints:
- width: 375
containerWidth: 351
gridColumns: 7
navLinksVisible: 1
menuToggleVisible: false
headingPx: 45
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 688
gridColumns: 1
navLinksVisible: 1
menuToggleVisible: false
headingPx: 68
bodyPx: 16
sectionPaddingX: 0
- width: 1024
containerWidth: 864
gridColumns: 1
navLinksVisible: 7
menuToggleVisible: false
headingPx: 68
bodyPx: 16
sectionPaddingX: 0
- width: 1280
containerWidth: 1120
gridColumns: 1
navLinksVisible: 7
menuToggleVisible: false
headingPx: 96
bodyPx: 16
sectionPaddingX: 0
- width: 1440
containerWidth: 1280
gridColumns: 1
navLinksVisible: 7
menuToggleVisible: false
headingPx: 96
bodyPx: 16
sectionPaddingX: 0
coverage:
statesFound: 54
gradientsFound: 1
rolesUnassigned: 6
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
Ellipsus embodies a refined, literary aesthetic that elevates the everyday act of writing into something purposeful and elegant. The design system is anchored in a striking contrast between deep, sophisticated darks and clean, inviting light surfaces, with carefully placed moments of vibrant color that evoke creativity and human warmth. The visual language prioritizes clarity and restraint—generous whitespace, elegant serif display typefaces paired with modern sans-serif body text, and a deliberately restrained color palette that lets content breathe. This is not a playful, extroverted system; it is contemplative, confident, and unapologetically focused on the writer's craft. Decorative geometric elements (subtle letter backgrounds, minimalist iconography) reinforce the literary identity without overwhelming. The overall impression is one of professional sophistication married to genuine care for the user's creative process.
Key Characteristics
{typography.display-xxl} — 96px, 300 weight) for commanding presence; humanist sans-serif (Manrope) for clarity and approachability{colors.primary} — #0C0D0D) paired with vibrant brand accent ({colors.accent} — #C455EB) for sophisticated brand moments{colors.canvas} — #F4F4F2) and content surfaces{colors.accent-1} through {colors.accent-5}) reserved for illustration, iconography, and non-semantic visual interest{rounded.full} — 9999px for avatars; {rounded.md} — 12px for buttons) communicate approachability-2px on the largest heading) creates visual tension and polish{colors.primary} — #0C0D0D): Dominant dark used for primary CTA backgrounds, brand mark, active states, and primary text. Conveys authority and focus.{colors.accent} — #C455EB): Vibrant purple used alongside the achromatic primary to signal brand moments, decorative highlights, and creative energy.{colors.link} — #EB5B55): Warm coral-red for inline hyperlinks, drawing the eye and inviting interaction.{colors.canvas} — #F4F4F2): Default page background; a soft, warm off-white that reduces eye strain and provides breathing room.{colors.surface} — #FFFFFF): Pure white for cards, panels, and content containers; also used as tertiary/placeholder text and label color on brand surfaces.{colors.surface-alt} — #1D1E20): Deep charcoal for alternating section bands and dark-themed backgrounds, providing visual rhythm.{colors.ink} — #282825): Primary text color for headings and high-emphasis content; nearly black with warm undertones.{colors.body} — #64645E): Body copy and secondary content; a medium brown-gray for legibility without harshness.{colors.muted} — #8F8F89): Captions, helper text, and tertiary information; lighter gray for visual subordination.{colors.hairline} — #2173BE): Blue hairline used for 1px borders and dividers; brings structure and precision.{colors.neutral-1} — #C5C5BA): Light neutral; reserved for subtle borders and background tints.{colors.accent-1} — #529A6A): Muted sage green; used for illustration and decorative elements only.{colors.accent-2} — #020203): Near-black; used for decorative contrast and illustration.{colors.accent-3} — #F09236): Warm orange; applied to decorative shapes and non-semantic visual interest.{colors.accent-4} — #56C87C): Fresh lime green; used for illustration and decorative accents only.{colors.accent-5} — #FFAD5C): Soft gold-yellow; reserved for decorative elements and creative visual moments.Primary (Display & Headings): Roslindale Display Narrow, serif, 300 weight — elegant, literary, and distinctive. Fallback: Georgia, serif.
Secondary (Body, UI, Buttons): Manrope, sans-serif, 400–700 weights — modern, legible, and human. Fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif.
Form Inputs: Arial, sans-serif — system default for maximum clarity and accessibility in text input contexts.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XXL | Roslindale Display Narrow | 96px | 300 | not measured | 0px | Hero headings; maximum visual impact |
| Display XL | Roslindale Display Narrow | 80px | 300 | not measured | 0px | Large section introductions |
| Display LG | Roslindale Display Narrow | 64px | 300 | not measured | 0px | Feature headlines |
| Display MD | Roslindale Display Narrow | 60px | 300 | not measured | 0px | Prominent section headers |
| Display SM | Roslindale Display Narrow | 40px | 300 | 1.2 | -2px | Subheadings with character; negative tracking adds polish |
| Display SM Strong | Roslindale Display Narrow | 40px | 400 | 1.2 | 0px | Emphasized display; slightly heavier weight |
| Heading MD Strong | Roslindale Display Narrow | 32px | 400 | 1.34 | 0px | Medium-emphasis headings |
| Heading MD | Roslindale Display Narrow | 32px | 300 | not measured | 0px | Standard section headings |
| Heading SM | Manrope | 28px | 400 | 1.5 | 0px | Secondary headings; transitions to sans-serif |
| Heading XS | Manrope | 18px | 400 | 1.44 | 0px | Tertiary headings and subheadings |
| Body XL | Manrope | 24px | 400 | not measured | 0px | Large body paragraphs; marketing copy |
| Body LG | Manrope | 20px | 400 | not measured | 0px | Featured body text |
| Body MD | Manrope | 16px | 500 | 1.13 | 0px | Primary body copy and button text |
| Body SM | Manrope | 14px | 400 | not measured | 0px | Secondary body and helper text |
| Body SM Strong | Manrope | 14px | 700 | not measured | 0px | Uppercase, emphasized small text |
| Body SM Uppercase | Manrope | 14px | 400 | not measured | 0px | Uppercase labeling and tags |
| Caption XS | Manrope | 12px | 400 | 1.0 | 0px | Minimal captions and metadata |
| Caption XS Strong | Manrope | 12px | 500 | 1.17 | 0px | Emphasized captions |
| Caption XS Uppercase | Manrope | 12px | 600 | 1.0 | 0px | Small uppercase labels |
| Caption XS 2 | Manrope | 12px | 600 | 1.0 | 0.48px | Uppercase with expanded letter spacing for clarity |
| Caption XS 3 | Manrope | 12px | 700 | not measured | 0px | Bold small caps; highest emphasis at caption scale |
| Label XS | Manrope | 12px | 400 | 1.33 | 0px | Form labels and short descriptions |
| Label MD | Arial | 16px | 400 | 1.5 | 0px | Input field labels (system font for clarity) |
| Label SM | Arial | 13.33px | 400 | not measured | 0px | Small input labels; system font |
| Button | Roslindale Display Narrow | 30px | 400 | 0.85 | 0px | CTA text; serif for brand distinction in large buttons |
300 weight) reserves serif elegance for display and headings, creating a literary hierarchy. Manrope provides modern approachability for body, UI, and repeated content.-2px) on display sizes ({typography.display-sm}) adds premium visual tension. All other roles use 0px or carefully measured positive spacing (e.g., 0.48px on uppercase labels for readability).1.13) for compact efficiency. Display and headings omit line-height or use loose ratios (1.5) to accommodate serif flourishes.30px and 400 weight, button text uses Roslindale to reinforce brand identity while remaining scannable.Primary Button
{colors.primary} — #0C0D0D{colors.surface} — #FFFFFF{spacing.sm} (12px) vertical, {spacing.md} (16px) horizontal{typography.body-md} — 16px, Manrope, 500 weight{rounded.md} — 12pxSecondary / Filled Button
{colors.surface} — #FFFFFF{colors.ink} — #282825{spacing.sm} (12px) vertical, {spacing.md} (16px) horizontal{typography.body-md} — 16px, Manrope, 500 weight{rounded.md} — 12pxIcon Button
{colors.link} — #EB5B55 (coral-red for CTAs){colors.canvas} — #F4F4F2 (neutral for utility){colors.surface} — #FFFFFF (primary), {colors.ink} — #282825 (secondary){rounded.full} — 9999px (pill/circle)Header Navigation
{colors.canvas} — #F4F4F2{colors.ink} — #282825{spacing.band} (64px) horizontal{typography.body-md} — 16px, Manrope, 400 weight{rounded.none} — 0px (flush top)Inline Link
{colors.link} — #EB5B55 (coral-red){typography.body-md} — 16px, Manrope, 400 weight{colors.body} — #64645E (secondary)Link (Button-like)
{colors.ink} — #282825{spacing.sm} (12px) vertical, {spacing.md} (16px) horizontal{typography.body-md} — 16px, Manrope, 500 weight{rounded.md} — 12pxCard (Default)
{colors.surface} — #FFFFFF{colors.neutral-1} — #C5C5BA{colors.ink} — #282825{spacing.xl} (24px) on all sides{rounded.lg} — 16px{typography.body-md} — 16px, Manrope, 400 weightCard (Large / Featured)
{colors.surface} — #FFFFFF{colors.hairline} — #2173BE (blue accent border){colors.ink} — #282825{spacing.xl} (24px) top/left/right, {spacing.lg} (20px) bottom{rounded.lg} — 16px{typography.body-md} — 16px, Manrope, 400 weightrgba(0, 0, 0, 0.05) 0px 2px 14px 0px, rgba(0, 0, 0, 0.05) 0px 2px 8px 0pxText Input
{colors.surface} — #FFFFFF{colors.neutral-1} — #C5C5BA{colors.body} — #64645E{colors.muted} — #8F8F89{spacing.md} (16px) horizontal, {spacing.sm} (12px) vertical{typography.label-md} (16px, Arial, 400) or {typography.label-sm} (13.33px, Arial, 400){rounded.sm} — 8pxBadge (Text / Pill)
{colors.ink} — #282825{spacing.xxs} (4px) vertical, {spacing.xs} (8px) horizontal{typography.caption-xs-uppercase} — 12px, Manrope, 600 weight, uppercase{rounded.xs} — 4px (small pill)Base unit: {spacing.xs} — 8px. All spacing derives from this scale for coherent rhythm:
{spacing.xxs} — 4px: Minimal internal padding (badge content, tight groups){spacing.xs} — 8px: Baseline margin between inline elements, tight component spacing{spacing.sm} — 12px: Padding inside small components (buttons, inputs, badges){spacing.md} — 16px: Standard margin/padding (cards, form fields, text blocks){spacing.lg} — 20px: Vertical rhythm in body copy; spacing between related sections{spacing.xl} — 24px: Card padding and major content blocks{spacing.xxl} — 32px: Spacing between distinct sections{spacing.xxxl} — 40px: Large groupings and visual breaks{spacing.section} — 60px: Vertical rhythm between major content sections{spacing.band} — 64px: Horizontal padding on full-width containers; also header horizontal paddingUsage Context: Headings use {spacing.xxxl} or {spacing.section} above. Card internals use {spacing.md} and {spacing.xl}. Form field groups use {spacing.lg}. Button groups use {spacing.md} between items.
{colors.surface-alt} — #1D1E20) frame distinct content sections. Padding scales with viewport ({spacing.band} — 64px on desktop, 0px on mobile observed).Whitespace is not a fallback but a design principle. Large headings ({typography.display-xxl} — 96px) occupy significant vertical space, signaling importance. Body copy sits in clean, uncluttered regions with breathing room above and below ({spacing.section} — 60px between sections). Cards and containers are generously padded ({spacing.xl} — 24px internal), avoiding cramped content. The neutral palette (lots of {colors.canvas} — #F4F4F2 background) reinforces this openness. Negative space guides the eye toward calls-to-action and reinforces the refined, literary brand personality.
{rounded.none} — 0px: Images, hero sections, sharp architectural elements{rounded.xs} — 4px: Badges, small decorative accents{rounded.sm} — 8px: Text inputs, subtle rounding{rounded.md} — 12px: Buttons, moderate rounding; the primary interactive radius{rounded.lg} — 16px: Cards, panels, content containers{rounded.xl} — 30px: Reserved for specific design moments (measured but rarely used){rounded.full} — 9999px: Avatars, icon buttons, circular elements; signals playfulness and approachability1px): Applied to card borders, input borders, and hairline dividers. Used for {colors.neutral-1} (#C5C5BA) and {colors.hairline} (#2173BE) strokes. Provides definition without visual weight.Ellipsus employs a minimal, progressive shadow strategy. Depth comes primarily from color blocking (surface changes) rather than aggressive shadowing. When shadows appear, they are near-transparent and stacked in layers for a barely-there lift.
| Level | Treatment | Use |
|---|---|---|
| Base (flat) | No shadow; box-shadow: none | Most cards, buttons, inputs. Majority of UI. |
| Lift (sm) | rgba(0, 0, 0, 0.05) 0px 2px 14px 0px, rgba(0, 0, 0, 0.05) 0px 2px 8px 0px | Featured cards (e.g., default-lg variant); subtle hoverable elements. Two near-transparent layers create minimal depth. |
| Lift (md) | rgba(44, 45, 48, 0.04) 0px 6px 24px 0px, rgba(44, 45, 48, 0.04) 0px 0px 24px 0px | Modals, dropdowns, or high-z elements (not extensively used on this site). Even lighter than sm; color-adjusted for nuance. |
Shadow Philosophy: Shadows are whispers, not shouts. The system avoids dark, dramatic drops; instead, a combination of micro-layers and low opacity creates perceived elevation without visual disruption. This aligns with the refined, literary brand: restraint speaks louder than exuberance.
display: none equivalents96px, 80px, 64px); Manrope for body, buttons, and UI. This duality is core to the brand identity.{colors.primary} — #0C0D0D) and accent ({colors.accent} — #C455EB) carry brand moments. Use neutral grays ({colors.ink}, {colors.body}, {colors.muted}) for content hierarchy.{spacing.xl} — 24px), and ample spacing between sections ({spacing.section} — 60px) reinforce clarity and refined aesthetics.-2px tracking on {typography.display-sm} is a defining visual signature; replicate this on all hero and large display headings.{colors.accent-1} through {colors.accent-5}) are for illustration and visual interest only—never for semantic signaling or interactive states.{rounded.full} (9999px) to signal warmth and approachability.{colors.hairline} — #2173BE) on large cards adds visual priority; ensure sufficient contrast with white background.12px): Buttons must use {rounded.md} (12px), not 9999px or 0px. This is the system standard for interactive components (excluding icon buttons).xs through band) is absolute across breakpoints. Maintain {spacing.md} padding on cards even at 375px; reflow content instead of compressing spacing.| Breakpoint | Viewport Width | Content Width | Layout Columns | Nav Links Visible | Key Changes |
|---|---|---|---|---|---|
| Mobile | 375px | 351px | 1 | 1 | Largest heading: 45px ({typography.display-sm} alternative); body remains 16px |
| Tablet | 768px | 688px | 1 | 1 | Largest heading: 68px; content width expands; spacing adjusts but remains single-column |
| Small Desktop | 1024px | 864px | 1 | 7 | All navigation links visible; content width continues to expand |
| Standard Desktop | 1280px | 1120px | 1 | 7 | Heading reaches 96px ({typography.display-xxl}); full visual expression |
| Wide Desktop | 1440px | 1280px | 1 | 7 | Maximum content width; no further expansion beyond this point |
Breakpoint Strategy: Content width scales linearly with viewport size. No grid reflow occurs; layout remains single-column across all sizes. Navigation collapses are not evident in the measured data (1 link visible at 375px suggests dropdown or menu toggle, but toggle visibility was not explicitly measured—see Known Gaps). Heading size scales discretely at two points: 45px (mobile) → 68px (tablet) → 96px (desktop).
Minimum interactive touch target size: 44px × 44px (inferred from button heights and icon button dimensions).
{spacing.sm} padding); width varies by content{rounded.full}){spacing.sm} / {spacing.md} recommended)1280px (measured at 1440px viewport). Below that, content width increases proportionally with viewport.96px (desktop) to 68px (tablet) to 45px (mobile). Body text stays fixed at 16px across breakpoints.{spacing.band} (64px) on desktop but appear to reduce on mobile (0px observed at 375px). This allows content to bleed to edges and maximizes readability on small screens.Primary CTA & Brand Accent:
{colors.primary} — #0C0D0D){colors.accent} — #C455EB)Text & Content:
{colors.ink} — #282825){colors.body} — #64645E){colors.muted} — #8F8F89){colors.link} — #EB5B55)Surfaces & Backgrounds:
{colors.canvas} — #F4F4F2){colors.surface} — #FFFFFF){colors.surface-alt} — #1D1E20)Borders & Structure:
{colors.hairline} — #2173BE){colors.neutral-1} — #C5C5BA)Decorative / Non-Semantic:
{colors.accent-1} — #529A6A){colors.accent-2} — #020203){colors.accent-3} — #F09236){colors.accent-4} — #56C87C){colors.accent-5} — #FFAD5C)Typography hierarchy is dual-font: Roslindale Display Narrow (serif, 300–400 weight) for display/headings. Manrope (sans-serif, 400–700 weight) for body/UI. Never mix this rule.
Display headings use negative letter-spacing: Apply -2px to the largest display sizes (typically {typography.display-sm} and larger). This is a brand signature; omitting it breaks visual identity.
Button radius is always 12px (except icon buttons): Standard buttons use {rounded.md}. Icon buttons use {rounded.full} (9999px). Do not vary this without explicit new token data.
Spacing scale is absolute; do not compress on mobile: Use {spacing.sm} (12px), {spacing.md} (16px), and {spacing.xl} (24px) on cards and controls at all breakpoints. Reduce content complexity on mobile, not spacing.
Card padding is 24px (all sides). Featured card padding is 24px top/left/right and 20px bottom. Borders: default is 1px solid {colors.neutral-1} (#C5C5BA); featured cards use 1px solid {colors.hairline} (#2173BE).
Shadows are nearly invisible; use the two-layer stacks: Only two shadow specs exist (sm and md). Apply sm to featured cards; md for rare high-z elements. Most UI is flat.
Decorative accents have no semantic meaning: The five accent colors (sage green, near-black, orange, lime, gold) are illustration-only. Never use them for error/success/warning or interactive state signaling.
Single-column layout at all breakpoints: Do not add side-by-side card layouts or multi-column grids. Content stacks vertically; width scales from 351px (mobile) to 1280px (max).
Navigation header: {colors.canvas} background, 74px height, {spacing.band} (64px) horizontal padding on desktop. Nav links use Manrope 16px, 400 weight, with hover underline and color transition.
Respect the color hierarchy: Primary and accent are reserved for CTAs and brand moments. Neutrals carry content. Link color (coral-red, #EB5B55) is distinct and inviting. Use each color only in its defined role.
No semantic color ramp: The site does not declare error, success, warning, or info states in its extracted styles. There is no measured palette for semantic feedback. If status signaling is needed, request explicit color data from the design team.
Six unassigned accent colors: {colors.accent-1} through {colors.accent-5} plus {colors.accent-2} have no measurable role in the UI. They appear to be reserved for illustration, decorative shapes, and branded visual assets. Their exact usage context was not captured; assume decoration-only and validate before applying to interactive elements.
Incomplete interaction state specs: The extraction includes CSS properties for some hover/focus/active states (e.g., text-decoration: underline on link:hover, opacity and transform changes on elements), but not comprehensive state data for all component variants. Primary button hover, secondary button active, and input focus states have variable/CSS-custom-property references that could not be resolved. Implementation should follow standard UI patterns (e.g., button hover = slight opacity increase or background tone shift) until explicit state tokens are provided.
Dark mode or theme variants: The extraction identified no derived or alternate theme. The system is single-theme as measured. If a dark mode exists behind authentication or on a separate route, it was not captured.
Surfaces behind authentication: The site's protected areas (logged-in UI, dashboard, editor view) were not analyzed. The extracted system represents the public marketing pages and sign-up flow only. Internal tools, collaborative editing UI, and authenticated product may have distinct patterns.
Animation and transition specs: The design tokens do not include timing functions, durations, or easing curves for transitions. Measured CSS properties show transform and opacity changes on hover (e.g., rotations, scaling), but animation specs (e.g., transition: transform 0.3s ease-out) were not extracted. Standard web animation best practices should be applied.
Exact responsive media queries: Breakpoints are inferred from content-width measurements at five viewport sizes. The precise pixel values where CSS changes (e.g., heading size step from 68px to 96px) were not captured. Implement common breakpoints (375px, 768px, 1024px, 1280px, 1440px) and adjust heading sizes at those points based on observed ranges.
Menu toggle / mobile navigation behavior: Navigation link visibility was observed (1 link at 375px, 7 at 1024px+), but the mechanism for hiding/showing links (e.g., hamburger menu, dropdown) was not explicitly measured. Assume a standard collapsible menu pattern.
Form validation and error states: No error, warning, or validation feedback styles were extracted. Input focus, disabled, and error states require explicit design input.
Disabled component states: While some opacity levels are defined (0.5, 0.6, 0.83), the exact styling for disabled buttons, inputs, and links was not fully specified. Assume reduced opacity or muted color on disabled elements pending explicit token data.
Micro-interactions and gestures: Measured CSS includes rotations and scaling on hover (e.g., transform: rotate(-180deg), scale(1.08)), suggesting decorative animations. Full animation logic and trigger conditions are beyond the scope of this extraction.
Extraction Coverage: 6 pages analysed across the Ellipsus public site. Tokens represent systemic design patterns, not single-page snapshots. Confidence is high for public-facing UI; surfaces behind authentication and real-time collaboration features are not covered.