Ellipsus

Overview

Ellipsus is a collaborative writing platform built by writers for writers, rejecting the bloated feature-set of generic document tools in favor of editorial clarity and human-centered interaction. The design language embraces **Principled Minimalism**—a philosophy that treats every pixel as a deliberate editorial choice, where whitespace is not absence but active composition. The interface evokes the precision of a well-edited manuscript: warm neutrals (#282825 for primary text, #fbfbf9 for breathing room), paired with a restrained accent palette (primary blue #2173be for actions, supporting corals and greens for status). The emotional response is one of calm focus: users feel they are writing in a space designed by people who understand the craft, not a corporate platform.

The brand voice is conversational yet authoritative, never breathless or hyperbolic. Ellipsus speaks in the language of writers: "One place for drafts, edits, and discussions" rather than "unified collaboration workspace." Vocabulary favors concrete nouns (drafts, edits, revisions) over abstract process-speak. The tone is direct, occasionally witty, always respectful of the user's time and intelligence. Example: "Ellipsus is a collaborative writing tool made for creativity"—note the simplicity, the focus on the human act (creativity) rather than the technology.

Colors

The color system is rooted in **Editorial Restraint**: a neutral-first palette anchored by warm blacks and off-whites, with carefully rationed accent colors used only for interactive affordances and status communication. The surface stack progresses from pure white (#ffffff) through carefully calibrated grays—surface-dim (#ecece9), surface-container (#f4f4f2), surface-light (#f8f8f7)—creating visual hierarchy through luminance rather than hue. Primary (#2173be) is a confident, readable blue reserved for call-to-action buttons, active states, and focus indicators; it appears sparingly to maintain its signal strength. Secondary (#eb5b55) is a warm coral used for alerts, destructive actions, and emphasis; tertiary (#529a6a) is a muted green for success states and positive feedback. On-surface

Typography

The type system pairs two distinct voices: **Roslindale Display Narrow** (a high-contrast serif with condensed proportions) for headlines and display text, and **Manrope** (a geometric sans-serif with generous spacing) for body and interface text. This pairing creates visual contrast—the serif headlines feel editorial and authoritative (display at 56px/64px line-height with -0.02em letter-spacing for tightness), while Manrope body text (16px/24px line-height) remains approachable and scannable. Headlines use font-weight 400 (regular) to avoid heaviness; body text uses 400 for regular paragraphs and 600 for emphasis. Label text (12px–14px) uses Manrope at 500–600 weight for UI labels and buttons. Apply text-rendering: optimizeLegibility and -webkit-font-smoothing: antialiased on all text to

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining a fluid-to-fixed breakpoint strategy: below 768px, the grid collapses to 4 columns with gutter spacing of 24px; above 1280px, content centers with symmetric margins. Whitespace is semantic: the lg spacing token (40px) separates major sections (hero from features, features from testimonials), md spacing (24px) groups related components, and sm spacing (12px) creates breathing room within cards and lists. Container max-widths vary by context—hero sections use 1399px for visual impact, while content sections use 939px to optimize reading line-length. The gutter (24px) is consistent across all breakpoints, creating a predictable rhythm. Padding inside cards and inputs uses md (24px) for generous internal spacing, r

Elevation & Depth

Depth is conveyed through subtle layering and restrained shadows, avoiding the visual noise of aggressive drop-shadows. Level 1 (base surfaces) uses no shadow, relying on border-color: outline-variant (#c5c5ba) for definition. Level 2 (cards, modals) applies box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08)—a soft, diffuse shadow that suggests lift without drama. Level 3 (floating panels, popovers) uses box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), a larger blur radius and spread to convey greater separation. Hover states on interactive elements (buttons, cards) transition to Level 2 shadow over 200ms

Shapes

The shape language is **Soft-Technical**: rounded corners are used sparingly and purposefully, avoiding the extremes of sharp rectangles or fully rounded pill shapes. Buttons use rounded.md (0.75rem / 12px) for a slightly softened edge that feels contemporary without being playful. Cards and containers use rounded.lg (1rem / 16px) for a more pronounced but still restrained curve. Input fields use rounded.DEFAULT (0.5rem / 8px) for a minimal, utilitarian feel. Badges and status indicators use rounded.full (9999px) to signal their atomic, non-interactive nature. The rationale: 12px corners on bu

Components

Action Elements Buttons are the primary interaction affordance. **button-primary** uses background-color: #2173be, text-color: white, padding: 12px 24px, height: 44px, rounded: 12px, and typography: label-md (14px, 600 weight). On hover, transition background-color to #1f4477 over 150ms. On active/pressed, darken further to #1f4477 and reduce padding-top by 2px to simulate a press effect. **button-secondary** uses transparent background with a 1px border in outline (#282825), same padding and height, and text-color: primary. On hover, set background-color to surface-container-high (#ecece9) and maintain the border. Both button variants should have cursor: pointer and user-select: none.

Containers & Surfaces **card** is the foundational container: background-color: surface-containe

Do's and Don'ts

**Do**

• Do use primary (#2173be) exclusively for interactive affordances—buttons, links, focus states—to maintain its signal strength and prevent color fatigue.
• Do maintain at least 24px of padding inside cards and containers; whitespace is a design feature, not wasted space.
• Do apply transitions (150–200ms, cubic-bezier(0.2, 0, 0.38, 0.9)) to all interactive state changes (hover, focus, active) for a polished, responsive feel.
• Do use Roslindale Display Narrow for headlines only; it is a display typeface and loses legibility at body sizes.
• Do pair warm neutrals (#282825 text on #ffffff background) to reduce eye strain and evoke editorial warmth.

**Don't**

• Don't use multiple accent colors in a single UI section; restrict secondary (#eb5b55) and tertiary (#529a6a) to status/feedback roles only.
• Don't apply shadows to text elements or small UI components; shadows are reserved for elevated surfaces (cards, modals).
• Don't mix border-radius values within a single component family (e.g., don't use 8px and 12px on different buttons).
• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds; use on-surface (#282825) and surface (#ffffff) from the token system.
• Don't animate color changes without a transition; all state changes should use the cubic-bezier(0.2, 0, 0.38, 0.9) easing over 150–200ms.