# Standard Projects — Style Reference
> Typographic Precision on White Canvas
**Theme:** light
Standard Projects employs a classic, content-focused visual style with strong typographic emphasis. It features a predominantly stark black-and-white canvas, using minimal surface elevation. A single, soft gray gradient provides subtle background shifts. Typography is the primary visual communicator, leveraging distinct font weights and sizes to establish hierarchy, complemented by a subtly rounded UI for controls that contrasts with the generally sharp, angular image presentation. The overall impression is one of confident, understated authority.
## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Midnight Ink | `#000000` | `--color-midnight-ink` | Primary text, icon fill, borders, active navigation background. Creates strong contrast on light surfaces |
| Canvas White | `#ffffff` | `--color-canvas-white` | Page backgrounds, prominent card surfaces. Provides a clean, expansive base |
| Charcoal Text | `#1a1a1a` | `--color-charcoal-text` | Secondary text for headings and body content, darker borders. Offers slightly softer contrast than Midnight Ink |
| Fog Gray | `#f0f0f0` | `--color-fog-gray` | Subtle background surfaces, hover states for navigation. Provides a gentle visual separation from Canvas White |
| Muted Gray | `#808080` | `--color-muted-gray` | Helper text, muted links, secondary information, inactive states. Steps down in prominence from primary text |
| Pale Gray | `#c6c6c6` | `--color-pale-gray` | Subtle navigation background |
## Tokens — Typography
### Times — Decorative text and stylistic elements. Its serif nature provides a classic counterpoint to the primary sans-serif font. · `--font-times`
- **Substitute:** serif
- **Weights:** 400
- **Sizes:** 16px
- **Line height:** 1.20
- **Letter spacing:** normal
- **OpenType features:** `"ss01" on, "ss03"`
- **Role:** Decorative text and stylistic elements. Its serif nature provides a classic counterpoint to the primary sans-serif font.
### FTAktual-Medium — Primary typography for headings, body text, links, and buttons. The specific letter-spacing creates a distinct, open feel, particularly at larger sizes. Weight 500 is used for bolder statements. · `--font-ftaktual-medium`
- **Substitute:** system-ui
- **Weights:** 400, 500
- **Sizes:** 12px, 16px, 20px, 40px
- **Line height:** 1.10, 1.15, 1.20, 1.50
- **Letter spacing:** 0.01em
- **OpenType features:** `"ss01" on, "ss03"`
- **Role:** Primary typography for headings, body text, links, and buttons. The specific letter-spacing creates a distinct, open feel, particularly at larger sizes. Weight 500 is used for bolder statements.
### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| body | 16px | 1.2 | 0.16px | `--text-body` |
| subheading | 20px | 1.15 | 0.2px | `--text-subheading` |
| display | 40px | 1.1 | 0.4px | `--text-display` |
## Tokens — Spacing & Shapes
**Base unit:** 4px
**Density:** spacious
### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 32 | 32px | `--spacing-32` |
| 64 | 64px | `--spacing-64` |
| 84 | 84px | `--spacing-84` |
| 128 | 128px | `--spacing-128` |
| 212 | 212px | `--spacing-212` |
### Border Radius
| Element | Value |
|---------|-------|
| body | 15px |
| cards | 15px |
| buttons | 10px |
| navigation | 10px |
### Layout
- **Section gap:** 32px
- **Card padding:** 14px
- **Element gap:** 16px
## Components
### Primary Action Button
**Role:** Interactive element for key actions
Filled button with Midnight Ink background and Fog Gray text. Has a distinct 10px border-radius: `backgroundColor: #000000`, `color: #f0f0f0`, `borderRadius: 10px`, `padding: 10px 14px`.
### Navigation Link
**Role:** Primary site navigation items
Text links in FTAktual-Medium at 16px, Muted Gray text by default. A special 'S.P.' button has a 10px radius: `color: #808080`, `font-family: FTAktual-Medium`, `font-size: 16px`.
### Footer Navigation Bar
**Role:** Sticky, contextual navigation
A fixed horizontal bar with button-like navigation items. Features a background of pale gray with a 10px border radius, contrasting with the dark text links. `backgroundColor: #c6c6c6`, `borderRadius: 10px` for the container and `10px` for individual items.
### Ghost Badge
**Role:** Categorization or subtle labeling
Transparent background with Muted Gray text, no border radius, and minimal padding. Used for discreet content tagging. `backgroundColor: rgba(0, 0, 0, 0)`, `color: #808080`, `borderRadius: 0px`, `padding: 0px`.
### Project Card
**Role:** Container for showcasing project visuals and titles
A visually distinct card primarily housing an image, with text rendered below. The card itself has a subtle 15px border radius. `padding: 4px` internal padding for text below image.
## Do's and Don'ts
### Do
- Prioritize FTAktual-Medium for all primary text, leveraging its consistent 0.01em letter-spacing for refined readability.
- Utilize Canvas White (#ffffff) as the dominant background color for clarity and a spacious feel.
- Employ Midnight Ink (#000000) for primary text and major interactive elements to ensure strong contrast and visual weight.
- Apply a 10px `border-radius` to all buttons and prominent navigation elements for a subtle, rounded friendliness.
- Maintain generous spacing: `32px` vertical `sectionGap` between major content blocks and `16px` `elementGap` horizontally/vertically for internal elements.
- Use Muted Gray (#808080) for all secondary and tertiary text to create a subtle hierarchy without harshness.
- Incorporate the 'Times' font only for specific decorative or branding text, ensuring its unique features (`ss01`, `ss03`) provide a stylistic counterpoint.
### Don't
- Avoid arbitrary use of multiple background colors; stick to Canvas White (#ffffff), Fog Gray (#f0f0f0), and Pale Gray (#c6c6c6) for surfaces.
- Do not introduce complex shadows or elevated components; the design system favors a flat, content-forward aesthetic.
- Refrain from using color to denote semantic states (e.g., green for success, red for error), as the system is achromatic-focused.
- Do not deviate from the specified `0.01em` letter-spacing for FTAktual-Medium to preserve its distinctive feel.
- Avoid adding strong borders to components unless they are specified for interactive elements like buttons or navigation to maintain visual lightness.
- Do not use type sizes outside the defined scale of 12px, 16px, 20px, 40px for FTAktual-Medium.
- Do not use `border-radius` values other than 0px, 10px, or 15px as these are the established design system values.
## Imagery
The site predominantly uses product-focused photography and abstract graphics. Photography is often presented as clean, tight crops, sometimes against a white or neutral background, emphasizing the object without additional lifestyle context. Images appear within defined rectangular containers, maintaining sharp edges and isolated presentation. Icons, though not extensively visible, follow a monochrome, outlined style with consistent stroke weights. Imagery serves primarily as a decorative backdrop or as direct product showcases, forming a visually dominant element within a predominantly text-based layout with a balanced image-to-text density.
## Layout
The page maintains a full-width, full-bleed model, not confined by a `pageMaxWidth`. The hero section features a centered headline over a background that shifts between projects. Content is often arranged in a compact grid of visual project cards, typically showing a 3-column layout. Sections flow seamlessly with consistent vertical spacing of `32px` between major blocks, creating a spacious but continuous experience. Navigation is handled by a sticky footer bar, offering quick access to main sections.
## Agent Prompt Guide
### Quick Color Reference
- text: #000000
- background: #ffffff
- border: #000000
- accent: no distinct accent color
- primary action: no distinct CTA color
### 3-5 Example Component Prompts
- Create a section headline: 'Our Work' in Charcoal Text (#1a1a1a), FTAktual-Medium, weight 500, size 40px, lineHeight 1.1, letterSpacing 0.4px.
No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color.
- Design a navigation item: text 'About' in Muted Gray (#808080), FTAktual-Medium, weight 400, size 16px, lineHeight 1.2, letterSpacing 0.16px.
- Construct a project display card: a 15px `border-radius` container with an internal `14px` padding, a project image, and body text 'Project Title' in Charcoal Text (#1a1a1a), FTAktual-Medium, weight 400, size 16px, lineHeight 1.2, letterSpacing 0.16px.
## Similar Brands
- **Alinea Invest** — Uses a similar achromatic palette with strong type hierarchy and minimal UI embellishments.
- **Linear** — Shares the emphasis on clean, minimalist UI, sharp typography, and lack of heavy shadows or gradients.
- **Stripe** — Features a similar spacious, white-canvas approach with a focus on product visuals and clear, functional typography.
- **Vercel** — Employs a stark black-and-white aesthetic, with strong typographic scaling and subtle use of interactive elements.
## Quick Start
### CSS Custom Properties
```css
:root {
/* Colors */
--color-midnight-ink: #000000;
--color-canvas-white: #ffffff;
--color-charcoal-text: #1a1a1a;
--color-fog-gray: #f0f0f0;
--color-muted-gray: #808080;
--color-pale-gray: #c6c6c6;
/* Typography — Font Families */
--font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-ftaktual-medium: 'FTAktual-Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-body: 16px;
--leading-body: 1.2;
--tracking-body: 0.16px;
--text-subheading: 20px;
--leading-subheading: 1.15;
--tracking-subheading: 0.2px;
--text-display: 40px;
--leading-display: 1.1;
--tracking-display: 0.4px;
/* Typography — Weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
/* Spacing */
--spacing-unit: 4px;
--spacing-4: 4px;
--spacing-8: 8px;
--spacing-12: 12px;
--spacing-16: 16px;
--spacing-32: 32px;
--spacing-64: 64px;
--spacing-84: 84px;
--spacing-128: 128px;
--spacing-212: 212px;
/* Layout */
--section-gap: 32px;
--card-padding: 14px;
--element-gap: 16px;
/* Border Radius */
--radius-lg: 10px;
--radius-xl: 15px;
/* Named Radii */
--radius-body: 15px;
--radius-cards: 15px;
--radius-buttons: 10px;
--radius-navigation: 10px;
}
```
### Tailwind v4
```css
@theme {
/* Colors */
--color-midnight-ink: #000000;
--color-canvas-white: #ffffff;
--color-charcoal-text: #1a1a1a;
--color-fog-gray: #f0f0f0;
--color-muted-gray: #808080;
--color-pale-gray: #c6c6c6;
/* Typography */
--font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-ftaktual-medium: 'FTAktual-Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-body: 16px;
--leading-body: 1.2;
--tracking-body: 0.16px;
--text-subheading: 20px;
--leading-subheading: 1.15;
--tracking-subheading: 0.2px;
--text-display: 40px;
--leading-display: 1.1;
--tracking-display: 0.4px;
/* Spacing */
--spacing-4: 4px;
--spacing-8: 8px;
--spacing-12: 12px;
--spacing-16: 16px;
--spacing-32: 32px;
--spacing-64: 64px;
--spacing-84: 84px;
--spacing-128: 128px;
--spacing-212: 212px;
/* Border Radius */
--radius-lg: 10px;
--radius-xl: 15px;
}
```
Gallery Wall Typography - Massive…
High-contrast precision blueprint.
gallery wall contrast

High-contrast geometric clarity
Warm earth against dark steel
High-contrast monochrome blueprint
Midnight Command Center: precise…
monochrome playful sculpture
Architectural blueprints on…
Architectural Blueprint on White…
Editorial Minimal Canvas — Large,…
Startup Canvas, Clean Bold Type
Artisanal precision on a calm…
Graphic Monochrome Canvas: crisp,…
Architectural blueprint on warm…
Classical art gallery
High-contrast digital canvas – a…
Black & White Blueprint: A stark,…

Crisp canvas, gradient fireworks.…
Type Foundry Blueprint: precision…