# Congar identity guide

Mohammed Abdelhady · Senior Software Engineer

A practical reference for carrying the Congar identity into a new project: clear typography, paper surfaces, deep green actions, and motion that explains what changed.

## Start with the product

Use this guide when building a project for Mohammed Abdelhady. Congar is his personal identity; Open Form is its open C mark. Keep the product’s own purpose, name, and audience clear. A tool can belong to this family without becoming a personal homepage.

Use the new project’s own name and content. Keep Mohammed’s biography on his personal pages. Describe only verified work; never invent experience, clients, metrics, or availability.

## Give the content room

Build the hierarchy around a useful action and understandable content. Use generous margins, deliberate alignment, and restrained separators. Give headings, reading text, and supporting notes distinct roles. Compose small screens deliberately; do not shrink a desktop canvas.

Use Ink for headings, Text for supporting copy, and Action for controls with Paper text. Pale can separate a study or product surface. Sage supports illustration and accents; check contrast before using it for text. Keep hover states in this palette. Do not introduce orange hover treatments.

## Keep the voice recognizable

Use Archivo at normal 100% width for headings and reading. Its full weight range is available. Reserve Caveat 500 for short handwritten annotations, and IBM Plex Mono for code or small technical labels. Keep body copy direct, specific, and comfortable to read.

Use the supplied open C without stretching, clipping, or adding effects that obscure its shape. Give it clear space. Illustrations should explain the subject: paper, glass, and solid green forms can make an idea visible. Article imagery must relate to the article, not repeat a generic brand picture.

## Make motion useful

Keyboard focus uses an ink frame, a paper gap, and a sage halo. The frame settles into place over 240 ms and remains visible until focus moves. Keep the same clear indicator with motion disabled.

Animate feedback, relationships, and changes of state. Begin with 160–240 ms transitions and small movements; adjust to the interaction. Prefer transform and opacity. Avoid continuous decoration, blocking page transitions, and surprise movement. Touch and keyboard users must receive equivalent feedback.

Respect prefers-reduced-motion with immediate state changes or a brief fade. Keep essential content visible before hydration and without animation. Use semantic elements, visible focus, descriptive labels, and tested contrast. Prevent horizontal page overflow, including long links, code, and animated elements.

## Check the result

Test real routes on mobile and desktop, keyboard navigation, reduced motion, loading states, and browser history. Aim above 90 in Lighthouse performance, accessibility, best practices, and SEO; measure each page template. Scores are targets, not guarantees or a substitute for manual checks.

Give indexable pages useful titles, canonical URLs, and their own sharing image. Optimize image sizes and font loading. Keep the accompanying font licenses when redistributing fonts.

## Palette

- Ink: `#17231f`
- Action: `#263e33`
- Sage: `#839779`
- Pale: `#e0e6d4`
- Paper: `#f6f7f2`
- Text: `#53604f`

## Fonts and assets

Download the fonts and their licenses into your project. Serve each font at the local path shown below; the CSS starting values use these paths.

- [Archivo 100 900](https://www.congar.dev/fonts/taste-lab/archivo-latin-wght-normal.woff2) → /fonts/archivo.woff2 · [license](https://www.congar.dev/fonts/taste-lab/archivo-LICENSE.txt)
- [Caveat 500](https://www.congar.dev/fonts/handwriting/caveat-latin-500.woff2) → /fonts/caveat.woff2 · [license](https://www.congar.dev/fonts/handwriting/caveat-LICENSE.txt)
- [IBM Plex Mono 400](https://www.congar.dev/fonts/taste-lab/ibm-plex-mono-latin-400-normal.woff2) → /fonts/ibm-plex-mono.woff2 · [license](https://www.congar.dev/fonts/taste-lab/ibm-plex-mono-LICENSE.txt)
- [Open Form mark](https://www.congar.dev/brand/congar-mark-512.png)
- [Open Form illustration](https://www.congar.dev/brand/open-form.webp)
- [Identity board](https://www.congar.dev/brand/identity-board.webp)

[Visual guide](https://www.congar.dev/design/guide) · [JSON tokens](https://www.congar.dev/design/tokens.json)