WRITER

# WRITER — Style Reference
> AI-powered clarity on a pristine canvas. Like crisp code on a luminous display.

**Theme:** light

**Site:** https://writer.com

WRITER presents an authoritative yet approachable aesthetic, balancing corporate seriousness with a touch of AI-infused futurism. The design prioritizes clear information hierarchy through stark contrast and ample negative space, creating a sense of precision and advanced technology. Vivid violet and electric blue accents against a predominantly achromatic palette create distinct points of focus, signaling innovation and interaction. The interplay of soft, rounded buttons and sharp typographic edges establishes a dynamic visual tension, indicative of cutting-edge yet user-friendly platforms.

## Tokens — Colors

| Name | Value | Token | Role |
|------|------|------|------|
| Agent Violet | `#a95ef8` | `--color-agent-violet` | Key branding color, highlight in headlines, accent for specialized content — marks AI-driven aspects of the platform. |
| Digital Dawn Gradient | `#f7c8ed` | `--color-digital-dawn-gradient` | Decorative background for hero sections and illustrative elements — adds a soft, ethereal touch that contrasts with the sharp UI. |
| Action Blue | `#5551ff` | `--color-action-blue` | Primary call-to-action buttons, interactive elements, signifies core user engagement. |
| Electric Blue | `#007aff` | `--color-electric-blue` | Secondary interactive elements, links, icons — a vibrant digital indicator. |
| Midnight Graphite | `#000000` | `--color-midnight-graphite` | Primary text, prominent UI elements, button backgrounds on dark theme, strong contrasts. |
| Canvas White | `#ffffff` | `--color-canvas-white` | Page backgrounds, card surfaces, primary light text. |
| Slate Gray | `#2d2d2d` | `--color-slate-gray` | Secondary text, input fields, subtle backgrounds for content separation. |
| Cloud White | `#e4e7ed` | `--color-cloud-white` | Subtle section backgrounds, borders, dividers for visual breathing room. |
| Fog | `#d2d4d7` | `--color-fog` | Faint text, less emphasized elements, subtle borders. |
| Ghost Gray | `#bdbdbd` | `--color-ghost-gray` | Placeholder text, disabled states, supporting text. |
| Lavender Mist | `#e4e9ff` | `--color-lavender-mist` | Subtle button backgrounds, background elements suggesting digital presence. |

## Tokens — Typography

### Poppins
- **Substitute:** system-ui, sans-serif
- **Weights:** 400, 500, 600, 700
- **Sizes:** 11px, 12px, 13px, 14px, 16px, 18px, 20px, 25px, 40px, 44px, 64px
- **Line height:** 1, 1.15, 1.2, 1.25, 1.4, 1.5, 1.55, 1.6, 1.66, 1.67, 1.75
- **Letter spacing:** -0.031, -0.02, 0.077, 0.091, 0.1, 0.143, 0.3
- **Role:** Primary text font, used for both headings and body copy. Its extensive weights and precise letter-spacing control allow for distinct hierarchical expression, from prominent display text to fine print. The default 'clig' and 'liga' features suggest precise character spacing.

### CanelaDeck
- **Substitute:** serif
- **Weights:** 400
- **Sizes:** 16px
- **Line height:** 1.2
- **Role:** Used sparingly for decorative elements or specific brand moments. Its unique serif character provides a touch of classic sophistication amidst the modern sans-serif dominance, adding a subtle luxurious feel.

## Tokens — Type Scale

Augmented Fourth (1.414) from 14px base.

| Role | Size | Line height | Letter spacing |
|------|------|------|------|
| caption | 11px | 1.4 | 0.091em |
| body | 14px | 1.4 | — |
| subheading | 18px | 1.55 | — |
| heading | 25px | 1.25 | — |
| heading-lg | 40px | 1.2 | — |
| display | 64px | 1.2 | -0.031em |

## Tokens — Spacing

- **Max width:** 1136px
- **Card padding:** 0px
- **Element gap:** 8-20px

## Tokens — Radius

- **General:** 50px
- **Buttons:** 60px, 82px
- **Inputs:** 72px
- **Images:** 12px

## Layout

The site uses a max-width 1136px contained layout centered on the page, providing clear boundaries for content. The hero section often breaks this containment with full-bleed backgrounds or large visual elements. Sections generally alternate between light backgrounds ('Canvas White', 'Cloud White') and darker backgrounds ('Midnight Graphite', 'Slate Gray') to create visual rhythm and content separation. Content arrangement frequently uses a centered stack for headlines and calls to action, or a two-column layout with text on one side and a visual on the other. Navigation consists of a sticky top bar with brand logo, prominent CTA button, and clear text links. The 'comfortable' density relies on significant vertical 'sectionGap' spacing, along with 'elementGap' around elements for readability and visual calm.

## Imagery

The visual language focuses on a blend of abstract, ethereal gradients and tight, focused product visuals. Photography, when present, features clean, professional portraits (like the smiling woman in the hero) that convey approachability without sacrificing professionalism. Illustrations are minimal, often abstract, and use brand colors with smooth gradients. Icons are filled, monochrome, and simple, supporting the UI without drawing excessive attention. There's a high density of product screenshots and UI snippets, often layered or presented within mockups, showcasing the platform's functionality directly. The 'Digital Dawn Gradient' is used decoratively to soften otherwise sharp edges and add a touch of modern, digital ambiance.

## Components

### Hero Email CTA Form

### Writer Agent Section CTA

### Resources Cards — Dark Section

### Primary Call to Action Button
*Interactive element*

Pill-shaped button with solid Action Blue background (#5551ff), Canvas White text (#ffffff), 82px border radius, 10px vertical padding, 17px horizontal padding.

### Search/Email Input Field
*Form Element*

Dark input field with Slate Gray background (#515151), Canvas White text (#ffffff), and a distinctive 72px 0px 0px 72px border radius making it a half-pill. 1px vertical padding, 27px left padding, 50px right padding.

### Hero Section Email Input
*Form Element*

Ghost input field with transparent background, Slate Gray text (#666666), and a Slate Gray border (#666666). 25px horizontal padding. Accompanied by a square 'Request a demo' button.

### Header Navigation Link Default
*Navigation element*

Standard link text in Midnight Graphite (#000000) using Poppins. Displays as an underlined Electric Blue (#007aff) on hover/focus.

### Dark Theme Inline Link
*Navigation / Text element*

Text link on dark backgrounds in Electric Blue (#007aff) using Poppins, providing clear contrast for interactivity.

### Trust Bar Logo
*Informational element*

Images of partner logos displayed on a pure white background, unadorned, suggesting transparency and reliability often set against ample elementGap spacing of 8px.

### Info Banner
*Informational element*

Sticky banner at the top of the page with a dark background (#131315), Canvas White text (#ffffff). Features a prominent Electric Blue (#007aff) link. Serves for system-wide notices.

## Guidelines

### Do

- Always use 'Action Blue' (#5551ff) for primary call-to-action buttons to ensure consistent interaction cues.
- Maintain a clear visual hierarchy by utilizing 'Midnight Graphite' (#000000) for primary headlines and 'Slate Gray' (#2d2d2d) for body text and secondary information.
- Implement the 72px 0px 0px 72px border radius for input fields that have a defined background to create the signature semi-pill shape.
- Employ the 'Agent Violet' (#a95ef8) color strictly for branded elements, main value propositions, and AI-related features, ensuring its impact is reserved.
- Utilize Poppins for all primary text content; reserve CanelaDeck for subtle, decorative accent text where a serif feels appropriate for a touch of class.
- Keep ample negative space around elements, adhering to the elementGap range of 8-20px for comfortable density and modern feel.
- For interactive elements on dark backgrounds, use 'Electric Blue' (#007aff) to provide a vivid, contrasting highlight.

### Don't

- Do not deviate from the established button radius values (60px, 82px); avoid arbitrary rounding that would break component consistency.
- Avoid using highly saturated colors for large background areas; maintain the integrity of the achromatic palette broken only by subtle gradients.
- Do not use CanelaDeck for substantial blocks of body text; its weight and style are not optimized for readability at scale.
- Avoid applying drop shadows or complex elevation effects; the design relies on stark contrast and background shifts for depth, not traditional shadows.
- Do not mix 'Agent Violet' (#a95ef8) with standard link colors or common interactive elements as it dilutes its prestige and specific brand association.
- Refrain from using thin borders on interactive elements that could impact clickability or visual prominence, ensure borders are substantial when present.

## Agent Prompt Guide

### Quick Color Reference
- Text (Primary): #000000
- Background (Page): #ffffff
- CTA (Primary): #5551ff
- Border (Subtle): #d2d4d7
- Accent (Brand, AI): #a95ef8

### 3-5 Example Component Prompts
1. **Create a hero section:** White background. Headline 'Your AI agents can.' at 64px Poppins weight 700 with 'Agent Violet' (#a95ef8) for the word 'AI agents', letter-spacing -0.031em. Subtext 'The future of work is here.' at 18px Poppins weight 400, #2d2d2d. Include two buttons: Primary Call to Action Button 'Request a demo' and Secondary Ghost Button 'Learn more'. Place a background decorative gradient (linear-gradient(50deg, rgb(247, 200, 237) 50px, rgb(229, 236, 255) 130px, rgb(229, 236, 255) 100%)) as a subtle visual element behind the text.
2. **Design a pricing card:** 'Cloud White' (#e4e7ed) background, no border or shadow. Primary heading 'Enterprise Plan' at 25px Poppins weight 700, #000000. Body text 'For large teams and custom solutions' at 14px Poppins weight 400, #2d2d2d. Feature list using 16px Poppins weight 400, #000000, with simple filled SVG icons. Add a Primary Call to Action Button 'Contact Sales' at the bottom.
3. **Build a horizontal navigation bar for a dark section:** Background #131315. Text links 'Product', 'Solutions', 'Research' using Poppins weight 400, #ffffff, at 14px. On hover, text color should change to 'Electric Blue' (#007aff). Include a Primary Call to Action Button 'Try for free' aligned to the right.
4. **Generate an email signup form:** Use a 'Canvas White' (#ffffff) background. Input field for email address should use the Search/Email Input Field style (background #515151, text #ffffff, 72px 0px 0px 72px radius). Next to it, a square 'Subscribe' button with a solid 'Action Blue' (#5551ff) background and 'Canvas White' (#ffffff) text, 14px vertical padding, 24px horizontal padding and a 0px border radius.