نظام تصميم outcrowd.io

---
version: alpha
name: "outcrowd.io"
description: "Design system extracted from https://www.outcrowd.io/ on 2026-09-28"
colors:
  background: "#080808"
  surface: "#101010"
  surface-2: "#262626"
  surface-3: "#191919"
  foreground: "#ffffff"
  muted-foreground: "#080808"
  primary: "#fe4a23"
  on-primary: "#111111"
  secondary: "#774dff"
  border: "#ffffff"
typography:
  headline-display:
    fontFamily: "Itcavantgardestd Md"
    fontSize: "64px"
    fontWeight: 500
    lineHeight: "1"
    letterSpacing: "-0.639936px"
  headline-lg:
    fontFamily: "Itcavantgardestd Md"
    fontSize: "46px"
    fontWeight: 500
    lineHeight: "1.18"
  headline-md:
    fontFamily: "Itcavantgardestd Md"
    fontSize: "32px"
    fontWeight: 500
    lineHeight: "1.25"
  body-md:
    fontFamily: "Itcavantgardestd Md"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "1.4"
  label-md:
    fontFamily: "Itcavantgardestd Md"
    fontSize: "13px"
    fontWeight: 500
    lineHeight: "1.4"
  button:
    fontFamily: "Itcavantgardestd Md"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: "1.4"
rounded:
  none: "0px"
  lg: "8px"
  2xl: "27px"
  full: "9999px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "20px"
  6: "24px"
  7: "32px"
  8: "36px"
  9: "40px"
  10: "48px"
  11: "52px"
  12: "56px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    typography: "{typography.button}"
    rounded: "8px"
    height: "40px"
    padding: "14.544px 21.024px"
  card:
    backgroundColor: "#080808"
    rounded: "27px"
    padding: "54.72px"
---

# outcrowd.io

## Overview

Creative branding agency for startups ✪ Outcrowd ✪ Creative branding, web design & development agency: Outcrowd is a ➠ digital creative agency for startups that designs and develops great digital products ☑ We are creating branding, websites and mobile applications to deliver a great experience ✓

Gently rounded controls, flat surfaces separated by hairlines, large display type at 64px / 500, a single red accent on neutrals. The site ships in dark mode by default (dark surfaces, light type). Measured from 3287 rendered elements at 1440px wide on 2026-09-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#080808` | Page background |
| surface | `#101010` | Cards, panels, raised or recessed surfaces |
| surface-2 | `#262626` | Secondary surface |
| surface-3 | `#191919` | Secondary surface |
| foreground | `#ffffff` | Primary text |
| muted-foreground | `#080808` | Secondary text, captions |
| primary | `#fe4a23` | Accent: primary buttons, links, focus |
| on-primary | `#111111` | Text on the accent |
| secondary | `#774dff` | Secondary accent (violet) |
| border | `#ffffff` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#080808`, `#ffffff`, `#101010`, `#262626`, `#191919`, `#fe4a23`, `#404040`, `#774dff`.

Gradients in use: `radial-gradient(circle, rgba(255, 255, 255, 0.4), rgb(8, 8, 8) 58%)`; `radial-gradient(circle, rgba(255, 255, 255, 0.35), rgb(8, 8, 8) 62%)`; `linear-gradient(110deg, rgba(0, 0, 0, 0), rgb(8, 8, 8) 50%, rgb(8, 8, 8))`.

The accent `#fe4a23` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **Itcavantgardestd Md** for h1, h2, h3: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.

Font link found on the page: `https://fonts.googleapis.com`

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | Itcavantgardestd Md | 64px | 500 | 1 | -0.639936px |
| headline-lg | Itcavantgardestd Md | 46px | 500 | 1.18 | normal |
| headline-md | Itcavantgardestd Md | 32px | 500 | 1.25 | normal |
| body-md | Itcavantgardestd Md | 14px | 400 | 1.4 | normal |
| label-md | Itcavantgardestd Md | 13px | 500 | 1.4 | normal |
| button | Itcavantgardestd Md | 14px | 500 | 1.4 | normal |

Type scale in use: 14px, 16px, 18px, 22px, 24px, 32px, 46px, 64px, 112px. Base body size 14.4px.

The H1 renders at 63.936px / 500, center aligned, up to 605px wide, tracking -0.639936px. Sample: "Design & Brand Acceleration for SaaS Startups".

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 24, 32, 36, 40, 48, 52, 56 (px).
- Flex and grid gaps: 4, 8, 12, 16, 20, 24, 28, 32 px.
- Content max width: 1368px, centred.
- Breakpoints: 479px, 500px, 767px, 975px, 991px.
- Header: 0px tall, relative, background `rgba(0, 0, 0, 0)`; 7 nav links at 14.4px / 500 (CasesCases · ServiceService · BlogBlog · About usAbout us · Contact).

## Elevation & Depth

No box shadows in use; depth comes from hairline borders and surface tints (flat design).

## Shapes

- Buttons: 8px
- Inputs: 8px
- Cards and panels: 27px
- Images and media: 0px
- Radius scale: none 0px, lg 8px, 2xl 27px, full 9999px

## Components

### Button, primary

Background `#fe4a23`, text `#ffffff`, border none, radius 8px, height 40px, padding 14.544px 21.024px, 14px / 500. Sample label: "Contact".

### Card

Background `#080808`, border 1px solid #ffffff1a, radius 27px, padding 54.72px, no shadow. Typical size about 565×454px.

### Link

Colour `#8a5cff`, no underline at rest, weight 500.

## Dark Mode

The site is dark by default and no light mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1368px | 418px | 14.4px | 63.9px, 3 lines, center | 0px, 5 links, 1 CTA | media below text | 8→1 col; 2→1 col; 2→1 col | content-width |
| laptop 1024px | 973px | 297px | 10.24px | 45.5px, 3 lines, center | 0px, 5 links, 1 CTA | media below text | 8→1 col; 2→1 col; 2→1 col | content-width |
| tablet 768px | 730px | 223px | 7.68px | 34.1px, 3 lines, center | 0px, 5 links, 1 CTA | media below text | 8→1 col; 2→1 col; 2→1 col | content-width |
| phone 390px | 350px | 361px | 16px | 42px, 2 lines, center | 0px, 6 links, 1 CTA | media below text | 2→1 col; 2→1 col; 2→1 col | content-width |

- H1 goes 63.9px → 42px (66%), 3 → 2 lines.
- Nav never collapses to a hamburger (6 links still visible at 390px).
- Body text 14.4px → 16px.
- Phone side gutter 361px.
- Horizontal overflow at 390px (the source has a responsive bug; do not copy it).
- Section top padding 162px → 132px.

## Interaction & Motion

142 elements carry transitions; typical 0.5s with ease, mostly on color, transform, opacity. 2 running keyframe animations (zoomIn 0.3s 1; zsiqcntanim 1s 1).

- Hover on button-primary ("Contact"): no visible change; cursor pointer.
- Hover on nav-link ("Cases"): no visible change; cursor pointer.
- Focus on button-primary: no visible focus style measured (may rely on :focus-visible with keyboard only).
- Tooltip triggers exist (2 × title) but none opened on hover in the first viewport; title attributes fall back to the browser's native tooltip.
- 11 aria-haspopup triggers exist; none opened on hover (click-to-open menus).
- 124 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Do use 4px multiples for every padding, margin and gap; the site does not use odd values.
- Do reserve `#fe4a23` for actions and focus; never paint large areas with it.
- Do keep body text at 14.4px in Itcavantgardestd Md.
- Do match corner radii per element class (buttons 8px, cards 27px); do not pick one radius for everything.
- Don't add drop shadows; this design is flat.
- Don't substitute a different accent hue or introduce gradients that are not listed above.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.