# Design Reference - Mike Matas
> Minimalist textual canvas. Information presented with monastic simplicity against an expansive white background.

## Source
- Original site: https://mikematas.com
- Captured: 2026-04-11T16:39:06.283Z

## Tags
- minimalist
- text-heavy
- monochrome
- spacious
- high-contrast
- typographic
- editorial
- professional portfolio
- clean
- sharp

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Canvas White | `#FFFFFF` | neutral | Page backgrounds, overall dominant background. Provides a pristine, high-contrast surface for text. |
| Ink Black | `#000000` | neutral | Primary text, headings, icons, interactive elements. Represents the core informational content. |
| Muted Gray | `#999999` | neutral | Secondary text, subtle details, meta-information. Lowers the visual prominence without losing readability. |

## Typography
- role: The sole typeface, spanning all content from body text to headlines. The use of a custom sans-serif with a prominent thin (100) weight for main branding sets a tone of quiet sophistication and technical precision.; sizes: 18px, 20px, 40px; family: Lab Grotesque; weight: 100, 400, 600; lineHeight: 1.20; substitute: system-ui, sans-serif; letterSpacing: normal

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "none": "0px"
    },
    "elementGap": "",
    "sectionGap": "",
    "cardPadding": "",
    "pageMaxWidth": "900px"
  },
  "radius": {
    "none": "0px"
  }
}
```

## Component Patterns
- name: Project Card — California Plants
- name: Site Navigation Header
- name: Portfolio Project List
- name: Main Navigation Link; role: Unadorned textual links for navigation.
- name: Secondary Navigation Link; role: Subtle links for 'About', 'Twitter', 'Instagram'.
- name: Body Text Block; role: Paragraphs of body content.
- name: Primary Heading; role: Main title and section headings.
- name: Secondary Heading; role: Sub-headings or project titles.
- name: Project Metadata/Year Tag; role: Contextual dates or brief descriptors alongside project titles.

## Do
- Prioritize text as the primary visual element; every textual unit should be considered and precise.
- Maintain a high-contrast ratio between Ink Black (#000000) text and Canvas White background.
- Use Lab Grotesque consistently across all type roles, adhering to specified weights and sizes.
- Employ generous negative space, particularly horizontal and vertical margins (72px, 36px), to create a sense of calm and focus.
- Use a 0px border-radius for all elements, maintaining crisp, sharp edges.
- Confine body and main content to a max-width of 900px, centered on the page.

## Don't
- Avoid decorative elements, borders, or background colors that detract from body copy or visual clarity.
- Do not introduce additional typefaces or weights beyond Lab Grotesque 100, 400, 600.
- Refrain from using shadows or gradients; depth is achieved primarily through spacing and content hierarchy.
- Do not use color for emphasis; use changes in type size, weight, or the Muted Gray (#999999) secondary color.
- Avoid unnecessary icons or imagery that don't directly convey essential information.
- Do not break the strict achromatic palette with any brand or accent colors on the main content page.