# Moffitt.Moffitt. - — Style Reference
> monochrome gallery canvas
**Theme:** light
Moffitt.Moffitt. evokes a gallery-like atmosphere, pairing high-contrast monochrome with ample negative space to emphasize content over interface. Its visual language relies on stark black and white, subtly textured neutrals, and a complete absence of vibrant accents. Typography is the primary vehicle for detail, with a focus on distinct display and body faces. Components are minimal and often borderless, blending into the canvas to allow imagery and strong type to command attention.
## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas White | `#ffffff` | `--color-canvas-white` | Page backgrounds, elevated card surfaces, clean sections that emphasize content |
| Ink Black | `#000000` | `--color-ink-black` | Primary text, strong headlines, button backgrounds, borders, and interactive elements. Establishes high contrast |
| Fog Gray | `#f5f5f5` | `--color-fog-gray` | Subtle background for secondary sections, creating visual segmentation without strong contrast |
| Charcoal Gray | `#595b60` | `--color-charcoal-gray` | Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color |
| Stone Gray | `#888888` | `--color-stone-gray` | Muted text, helper text, and decorative strokes where minimal contrast is desired |
| Divider Gray | `#d8d8da` | `--color-divider-gray` | Fine borders and subtle dividers, providing structural separation |
## Tokens — Typography
### Suisse — Primary sans-serif for all UI text, headings, and body copy. Its range of weights and sizes supports a hierarchical information architecture, from compact labels to prominent titles. · `--font-suisse`
- **Substitute:** Helvetica Neue, Arial
- **Weights:** 400, 500, 600
- **Sizes:** 12px, 16px, 22px, 24px, 40px
- **Line height:** 1.00, 1.13, 1.17, 1.20, 1.25, 1.33, 1.39, 2.00
- **Letter spacing:** normal
- **Role:** Primary sans-serif for all UI text, headings, and body copy. Its range of weights and sizes supports a hierarchical information architecture, from compact labels to prominent titles.
### Lyon — Specialized light-weight serif for small text elements, such as metadata, captions, or callouts. Its delicacy provides a visual counterpoint to the more robust Suisse. · `--font-lyon`
- **Substitute:** Georgia, serif
- **Weights:** 100
- **Sizes:** 13px
- **Line height:** 1.00
- **Letter spacing:** normal
- **Role:** Specialized light-weight serif for small text elements, such as metadata, captions, or callouts. Its delicacy provides a visual counterpoint to the more robust Suisse.
### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.33 | — | `--text-caption` |
| body | 16px | 1.25 | — | `--text-body` |
| subheading | 22px | 1.13 | — | `--text-subheading` |
| heading | 24px | 1.17 | — | `--text-heading` |
| display | 40px | 1.2 | — | `--text-display` |
## Tokens — Spacing & Shapes
**Base unit:** 4px
**Density:** comfortable
### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 20 | 20px | `--spacing-20` |
| 40 | 40px | `--spacing-40` |
| 80 | 80px | `--spacing-80` |
| 120 | 120px | `--spacing-120` |
| 140 | 140px | `--spacing-140` |
### Border Radius
| Element | Value |
|---------|-------|
| tags | 50px |
| cards | 0px |
| images | 5px |
| inputs | 0px |
| buttons | 50px |
### Layout
- **Section gap:** 40px
- **Card padding:** 20px
- **Element gap:** 10px
## Components
### Pill Button - Light
**Role:** Interactive element (button).
White background, Ink Black text, 50px border-radius, 11px horizontal padding, 0px vertical padding. Used for secondary actions and tags.
### Pill Button - Dark
**Role:** Interactive element (button).
Ink Black background, Canvas White text, 50px border-radius, 11px horizontal padding, 0px vertical padding. Used for primary actions and prominent tags.
### Ghost Link
**Role:** Interactive text link/button.
Transparent background, Ink Black text, no border-radius or padding. Appears as pure text, often with an implicit interactive area.
### Muted Ghost Link
**Role:** Interactive text link/button (muted).
Transparent background, Stone Gray text, no border-radius or padding. Used for tertiary actions or less prominent links that fade into the background.
### Content Card
**Role:** Container for content.
Transparent background, 0px border-radius, no box shadow, 0px internal padding. Content within defines its visual boundaries.
### Form Input
**Role:** User input field.
Transparent background, Canvas White text, Canvas White 1px border, 0px border-radius, no padding. Minimalist input field for forms.
## Do's and Don'ts
### Do
- Prioritize high contrast between Ink Black (#000000) and Canvas White (#ffffff) for primary text and backgrounds.
- Use Fog Gray (#f5f5f5) as a subtle background for sections to create soft visual transitions, not strong divisions.
- Apply 50px border-radius for all interactive buttons and tags to maintain the distinct pill shape.
- Employ the Suisse font family for all functional text elements, varying weight to establish hierarchy.
- Maintain generous negative space around content blocks, ensuring a breathable and uncrowded layout.
- Use 0px radius for content cards and inputs, ensuring a sharp, modern appearance.
- Ensure borders, when present, are 1px solid using Divider Gray (#d8d8da) or Ink Black (#000000) for clean definition.
### Don't
- Do not introduce any saturated colors; resist the urge to add color for emphasis.
- Avoid using box shadows; prefer flat, stacked surfaces or subtle background color changes for depth.
- Do not use generic button styles; all primary and secondary buttons must adhere to the 50px pill-shape radius.
- Do not add unnecessary padding or borders to cards; keep them visually lightweight and integrated with the canvas.
- Avoid heavy or complex gradients; prefer solid colors or the natural gradients of photography.
- Do not use letter-spacing other than 'normal' for Suisse and Lyon fonts.
- Do not deviate from the specified font families; avoid system defaults or other creative typographies.
## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 1 | Canvas White | `#ffffff` | Primary page background and default surface for most content sections. |
| 2 | Fog Gray | `#f5f5f5` | Secondary background for alternating content sections, providing a subtle shift in visual texture. |
| 3 | Ink Black | `#000000` | Used as an occasional dark surface for highly impactful sections or controls, creating maximum contrast. |
## Imagery
The visual language is characterized by high-quality photography, often depicting architectural spaces, product shots, or stylized portraits. Images generally have a muted, almost desaturated color palette, aligning with the overall monochrome aesthetic. They are often full-bleed or large format, acting as primary visual content. For iconography, a minimalist, outlined style is preferred, typically in Ink Black or Stone Gray, maintaining a delicate and unobtrusive presence. Imagery serves to establish atmosphere, showcase projects, and provide a sophisticated backdrop, rather than acting as purely decorative elements.
## Layout
The page model is largely full-bleed, but with a strong emphasis on horizontal centering and comfortable negative space. Hero sections often feature large, impactful imagery alongside concise, high-contrast typography. Section rhythm is created through alternating Canvas White and Fog Gray backgrounds, providing clear visual breaks. Content arrangement frequently uses large, single-column blocks for impactful statements, or balanced two-column layouts pairing imagery with text. Navigation is minimal, typically a subtle sticky header with a hamburger menu icon. The overall density is spacious, allowing each element to breathe and resonate.
## Agent Prompt Guide
Quick Color Reference:
text: #000000
background: #ffffff
border: #d8d8da
accent: no distinct accent color
primary action: #000000 (filled action)
Example Component Prompts:
Create a primary navigation link: text 'Projects' in Suisse weight 400 at 16px, color Ink Black (#000000), no underline. When hovered, text color subtly changes to Charcoal Gray (#595b60).
Create a Pill Button for an important action: Ink Black (#000000) background, Canvas White (#ffffff) text 'Submit' in Suisse weight 400 at 16px, 50px border-radius, 11px horizontal padding, 0px vertical padding.
Create a secondary section heading: text 'Feed' in Suisse weight 400 at 40px, color Ink Black (#000000).
Create a ghost text button for a filter: text 'Music' in Suisse weight 400 at 16px, color Ink Black (#000000), transparent background, no border, no padding. When active, background is Ink Black (#000000) and text is Canvas White (#ffffff).
Create a content card with an image: 0px border-radius, transparent background, containing an image with 5px border-radius and a caption below in Lyon weight 100 at 13px, color Stone Gray (#888888).
## Similar Brands
- **Stripe** — Shares a sophisticated, high-contrast monochrome aesthetic with clean typography and minimal UI elements.
- **Apple** — Employs extensive use of negative space, large impactful imagery, and a focus on subtle surfaces with high contrast text.
- **B&O (Bang & Olufsen)** — Similar focus on premium, minimalist design with a heavy reliance on a black and white palette and quality photography to convey brand value.
- **Linear** — Features a highly refined, almost entirely achromatic UI where typography and crisp lines define components, and color is used sparingly for functional accents (though Linear uses a distinct accent color, Moffitt.Moffitt. explicitly does not).
## Quick Start
### CSS Custom Properties
```css
:root {
/* Colors */
--color-canvas-white: #ffffff;
--color-ink-black: #000000;
--color-fog-gray: #f5f5f5;
--color-charcoal-gray: #595b60;
--color-stone-gray: #888888;
--color-divider-gray: #d8d8da;
/* Typography — Font Families */
--font-suisse: 'Suisse', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-lyon: 'Lyon', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-caption: 12px;
--leading-caption: 1.33;
--text-body: 16px;
--leading-body: 1.25;
--text-subheading: 22px;
--leading-subheading: 1.13;
--text-heading: 24px;
--leading-heading: 1.17;
--text-display: 40px;
--leading-display: 1.2;
/* Typography — Weights */
--font-weight-thin: 100;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
/* Spacing */
--spacing-unit: 4px;
--spacing-20: 20px;
--spacing-40: 40px;
--spacing-80: 80px;
--spacing-120: 120px;
--spacing-140: 140px;
/* Layout */
--section-gap: 40px;
--card-padding: 20px;
--element-gap: 10px;
/* Border Radius */
--radius-md: 5px;
--radius-full: 50px;
--radius-full-2: 100px;
/* Named Radii */
--radius-tags: 50px;
--radius-cards: 0px;
--radius-images: 5px;
--radius-inputs: 0px;
--radius-buttons: 50px;
/* Surfaces */
--surface-canvas-white: #ffffff;
--surface-fog-gray: #f5f5f5;
--surface-ink-black: #000000;
}
```
### Tailwind v4
```css
@theme {
/* Colors */
--color-canvas-white: #ffffff;
--color-ink-black: #000000;
--color-fog-gray: #f5f5f5;
--color-charcoal-gray: #595b60;
--color-stone-gray: #888888;
--color-divider-gray: #d8d8da;
/* Typography */
--font-suisse: 'Suisse', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-lyon: 'Lyon', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-caption: 12px;
--leading-caption: 1.33;
--text-body: 16px;
--leading-body: 1.25;
--text-subheading: 22px;
--leading-subheading: 1.13;
--text-heading: 24px;
--leading-heading: 1.17;
--text-display: 40px;
--leading-display: 1.2;
/* Spacing */
--spacing-20: 20px;
--spacing-40: 40px;
--spacing-80: 80px;
--spacing-120: 120px;
--spacing-140: 140px;
/* Border Radius */
--radius-md: 5px;
--radius-full: 50px;
--radius-full-2: 100px;
}
```
gallery wall contrast
High-contrast monochrome blueprint

Minimalist digital gallery
Architectural Blueprint on White…
Monochrome Gallery Canvas – a…
Black canvas, stark typography

Precise Canvas, Vivid Product. A…
Gallery Wall Precision
Graphic Monochrome Canvas: crisp,…
White canvas, sharp monochrome…
alpine starkness on white canvas
Architectural blueprint on stark…
Monochrome high-performance stadium
High-contrast digital canvas – a…
monochrome digital canvas,…
Editorial White-glove Service
gallery on black velvet
Sculpted Minimalism on Canvas. An…
Dark canvas, bold blobs
High-contrast monochrome, violet…