# ReplytoSocial design system

## Overview

ReplytoSocial uses a paper-and-ink interface with chartreuse accents. Fraunces
display type adds editorial character. Inter keeps controls and body text clear.
Soft cards, generous radii, and restrained shadows support a calm workflow.

The website and extension help people draft replies without losing context.
Keep the source post, generated draft, tone settings, and review action distinct.

## Colors

Use semantic variables from `apps/website/src/app/globals.css`.

| Role             | Token          | Light     | Dark      |
| ---------------- | -------------- | --------- | --------- |
| Page             | `--background` | `#F8FAF5` | `#10231B` |
| Ink              | `--foreground` | `#1A3A2E` | `#EFF7E8` |
| Muted text       | `--muted`      | `#5F7A6B` | `#A7B9AA` |
| Line             | `--line`       | `#E4E9E2` | `#2A4437` |
| Surface          | `--surface`    | `#EEF3EA` | `#193127` |
| Primary accent   | `--violet`     | `#C7E70D` | `#C7E70D` |
| Secondary accent | `--cyan`       | `#526500` | `#B2CC0A` |

The `--violet` and `--cyan` names are retained token slots. Their implemented
colors are chartreuse and deep chartreuse, not violet and cyan.

Use tokens in components. Reserve raw values for token definitions and fixed
brand assets. Never rely on color alone for status or interaction.

## Typography

Fraunces is the display family for `h1`, `h2`, `h3`, and `.font-display`.
Inter is the primary body and interface family. Both load through `next/font`.

Display headings use tight tracking and compact line height. The landing hero
uses five to seven rem-based Tailwind steps with `0.98` line height. Body copy
usually uses readable `leading-7` or `leading-8` spacing.

Use weight and size before adding color for hierarchy. Keep labels short. Do
not apply display type to dense controls, tables, or long draft text.

## Layout

Marketing sections use centered containers up to `max-w-6xl` with `px-6` side
padding. Focused reading sections use `max-w-3xl` or `max-w-4xl`.

Layouts start in one column. They expand with standard `sm`, `md`, and `lg`
breakpoints. Keep primary actions close to their supporting copy. Preserve the
review step between a generated draft and a posted reply.

Use `.surface-card` for stable marketing surfaces. Use `.tool-card` around free
tools so controls remain readable in both system themes.

## Elevation & Depth

Borders and surface contrast provide most depth. Use `border-[var(--line)]` for
cards and dividers. The `shadow-soft` token provides the main elevated treatment:
`0 24px 80px rgba(17, 24, 39, 0.12)`.

Large blurred accent circles may sit behind hero previews at low opacity. They
are atmospheric, never content-bearing. Do not stack several shadow styles on
ordinary controls.

Focus uses a three-pixel primary accent outline with a three-pixel offset.
Tool inputs use the secondary accent plus a one-pixel background separation.

## Shapes

Use pill shapes for badges, compact calls to action, and status labels. Cards
usually use `rounded-2xl` or `rounded-3xl`. Major product previews may use two
to two-and-a-half rem radii.

Interactive elements need a minimum height of 44 pixels. Keep mascot geometry
unchanged. Use Lucide for interface icons and supplied SVGs for brand marks.

## Components

**Navigation:** Use the dark ink bar, green wordmark, clear text links, and a
chartreuse pill action. Mobile navigation must expose an explicit menu state.

**Primary action:** Use chartreuse with dark ink text. Keep the label concrete.
Provide visible hover, focus, disabled, and loading states.

**Surface card:** Use paper or surface fill, a semantic border, and large radius.
Avoid introducing a raw white background without the shared surface context.

**Tool controls:** Use `.tool-card` tokens, 44-pixel targets, visible labels,
strong focus outlines, and explicit result or error feedback.

**Reply preview:** Separate the source post from the generated draft. Show tone
and readiness as supporting context. Keep review as the primary next action.

**Brand mark:** Choose the supplied light, dark, or mascot asset for its surface.
Preserve aspect ratio and provide meaningful alternative text where needed.

## Do's and Don'ts

Do:

- Use semantic color variables in website components.
- Keep Fraunces for display moments and Inter for working text.
- Preserve strong focus states and 44-pixel interaction targets.
- Test light, dark, narrow, wide, keyboard, and reduced-motion states.
- Keep source content, generated drafts, and human actions distinct.
- Reuse supplied brand assets and shared surface classes.

Do not:

- Interpret the `--violet` and `--cyan` names as literal colors.
- Use raw brand colors inside components when a token exists.
- Hide posting control or imply that ReplytoSocial posts for the user.
- Use heavy shadows on every card or control.
- Distort, redraw, or casually recolor the mascot and wordmark.
- Add a new breakpoint, radius, or shadow without an interface need.