Qoder design system

---
version: alpha
name: Qoder
description: "Light interface measured from qoder.com: Instrument Sans type, green accents, tonal surfaces and 4px corners."
colors:
  background: "#F2F4F2"
  surface: "#F2F4F2"
  on-surface: "#0F0D0C"
  on-background: "#0F0D0C"
  on-surface-variant: "#141414"
  on-surface-muted: "#838280"
  on-surface-subtle: "#8E8C8B"
  surface-container-low: "#E9F6FE"
  surface-container: "#F7F8F7"
  surface-container-high: "#EBECEB"
  surface-container-highest: "#FFFFFF"
  overlay: "#73B78E33"
  overlay-strong: "#80C7769E"
  outline: "#E6E6E6"
  outline-variant: "#EFEFEF"
  primary: "#80C776"
  on-primary: "#000000"
  secondary: "#255A41"
  tertiary: "#75BB6B"
typography:
  headline-display:
    fontFamily: Instrument Sans
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.33
  headline-lg:
    fontFamily: Instrument Sans
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.31
  headline-md:
    fontFamily: Instrument Sans
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.23
  headline-sm:
    fontFamily: Instrument Sans
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.4
  body-md:
    fontFamily: Instrument Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
  body-lg:
    fontFamily: Instrument Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.38
  body-sm:
    fontFamily: Instrument Sans
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.45
  caption:
    fontFamily: Instrument Sans
    fontSize: 8px
    fontWeight: 400
    lineHeight: 1.5
  label-lg:
    fontFamily: Instrument Sans
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.38
  label-md:
    fontFamily: Instrument Sans
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
  label-sm:
    fontFamily: Instrument Sans
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.38
  headline-lg-mobile:
    fontFamily: Instrument Sans
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.27
rounded:
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 24px
  xl: 64px
  gutter: 8px
components:
  button-primary:
    backgroundColor: "#636261"
    textColor: "#636261"
    typography: "{typography.label-md}"
    rounded: 0px
    padding: 10px 0px
    height: 38px
  button-primary-hover:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.on-surface}"
  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface-muted}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: 0px 20px
    height: 36px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "#FDFDFD"
    typography: "{typography.label-md}"
    rounded: 32px
    padding: 0px 20px
    height: 36px
  button-ghost:
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-md}"
    rounded: 32px
    padding: 0px 20px
  input-field:
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-sm}"
    rounded: 0px
    padding: 12px 12px 10px 12px
  card:
    backgroundColor: "#F9F9F9"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-sm}"
    rounded: 0px
    padding: 0px
  link:
    textColor: "{colors.primary}"
---

# Qoder Design System

## Overview

Qoder describes itself as: “Qoder is a next-generation AI programming platform that offers intelligent code completion, AI conversational programming, and automatic code generation. It supports mainstream IDEs like VS Code and JetBrains. Download f” The interface is light, built on **Mist (#F2F4F2)** with **Charcoal (#0F0D0C)** text, and **Green (#80C776)** as the main accent.

Type is set in **Instrument Sans**. Headlines run large; body text is 14px. Depth comes from soft drop shadows. Corners are mostly 4px.

Measured from [qoder.com](https://qoder.com/) on November 4, 2026 at 1440×900 and 390×844 from 479 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 17 roles.

- **Mist (#F2F4F2):** Page background, seen 14 times. Token `background`.
- **Charcoal (#0F0D0C):** Primary text and headings, seen 59 times. Token `on-surface`.
- **Charcoal (#141414):** Secondary text, seen 27 times. Token `on-surface-variant`.
- **Gray (#838280):** Muted text and metadata, seen 11 times. Token `on-surface-muted`, CSS `--ant-color-text-tertiary`.
- **Gray (#8E8C8B):** Subtle text and placeholders, seen 34 times. Token `on-surface-subtle`, CSS `--ant-color-text-quaternary`.
- **Pale Blue (#E9F6FE):** Raised areas one step from the page, seen 2 times. Token `surface-container-low`, CSS `--ant-color-info-bg`.
- **Snow (#F7F8F7):** Cards and panels, seen 79 times. Token `surface-container`, CSS `--ant-color-fill-quaternary`.
- **Mist (#EBECEB):** Hover and pressed fills, seen 1 time. Token `surface-container-high`.
- **White (#FFFFFF):** Highest raised elements, seen 22 times. Token `surface-container-highest`, CSS `--ant-color-bg-base`.
- **Green 20% (#73B78E33):** Translucent fill for cards and controls, seen 12 times. Token `overlay`.
- **Green 62% (#80C7769E):** Stronger translucent fill, seen 1 time. Token `overlay-strong`.
- **Mist (#E6E6E6):** Borders and dividers, seen 34 times. Token `outline`.
- **Mist (#EFEFEF):** Secondary dividers, seen 14 times. Token `outline-variant`, CSS `--ant-color-border-quaternary`.
- **Green (#80C776):** Brand color on large areas, seen 4 times. Token `primary`, CSS `--ant-color-link`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.
- **Dark Teal (#255A41):** Secondary buttons, seen 3 times. Token `secondary`, CSS `--ant-color-primary-btn`.
- **Green (#75BB6B):** Accent (CSS variable). Token `tertiary`.

## Typography

**Instrument Sans** carries the whole interface. Fallback stack: `Instrument Sans, system-ui, -apple-system, sans-serif`. Other loaded fonts: QoderStaticSeti.

- **headline-display:** Instrument Sans 36px at weight 500, line height 1.33. Page title (h1).
- **headline-lg:** Instrument Sans 32px at weight 500, line height 1.31 (30px on mobile). Section headings (h2).
- **headline-md:** Instrument Sans 26px at weight 500, line height 1.23. Sub-section headings.
- **headline-sm:** Instrument Sans 20px at weight 500, line height 1.4. Card and feature titles.
- **body-md:** Instrument Sans 14px at weight 400, line height 1.43. Body text.
- **body-lg:** Instrument Sans 16px at weight 400, line height 1.38. Lead paragraphs.
- **body-sm:** Instrument Sans 11px at weight 400, line height 1.45. Secondary and small text.
- **caption:** Instrument Sans 8px at weight 400, line height 1.5. Captions and fine print.
- **label-lg:** Instrument Sans 16px at weight 500, line height 1.38. Large buttons and tabs.
- **label-md:** Instrument Sans 14px at weight 500, line height 1.43. Buttons, navigation and labels.
- **label-sm:** Instrument Sans 13px at weight 400, line height 1.38. Small labels and badges.

## Layout

Spacing is mostly on a 4px grid (72% of measured values), with some off-grid steps. Match the measured scale rather than rounding everything.

- **Scale:** xs 4px, sm 8px, md 12px, lg 24px, xl 64px.
- **Gaps:** 8px is the most common gap in flex and grid layouts.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgba(12, 12, 13, 0.1) 0px 1px 2px 0px, rgba(12, 12, 13, 0.05) 0px 1px 2px 0px`
- `rgba(0, 0, 0, 0.04) 0px 2px 2px -1px, rgba(0, 0, 0, 0.02) 0px 4px 4px -2px`
- `rgba(0, 0, 0, 0.1) -2px 0px 12px -8px`

Hairline rings and inset highlights also appear: `rgb(255, 255, 255) 0px 0px 0px 1440px`.

## Shapes

Most elements use 4px corners. Measured radii, most used first:

- **xs (4px):** 256 elements.
- **sm (6px):** 160 elements.
- **xl (16px):** 112 elements.
- **md (8px):** 80 elements.
- **lg (12px):** 50 elements.
- **full (9999px):** 24 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Pricing”):** #636261 fill, #636261 text, 14px/500, padding 10px 0px.
- **button-primary-hover:** background #0F0D0C, text #0F0D0C on hover.
- **button-outline (“Mobile”):** #F2F4F2 fill, #838280 text, 14px/500, 9999px radius, padding 0px 20px.
- **button-secondary (“Download”):** #255A41 fill, #FDFDFD text, 14px/500, 32px radius, padding 0px 20px.
- **button-ghost (“All Downloads”):** transparent fill, #141414 text, 14px/500, 32px radius, padding 0px 20px, border 1px solid #DDDDDD.
- **input-field (“Everything starts from here...”):** transparent fill, #141414 text, 13px/400, padding 12px 12px 10px 12px.
- **card:** #F9F9F9 fill, #141414 text, 13px/400, padding 0px, border 1px solid #EFEFEF, shadow `rgba(12, 12, 13, 0.1) 0px 1px 2px 0px, rgba(12, 12, 13, 0.05) 0px 1px 2px 0px`.
- **link:** transparent fill, #80C776 text, padding 0px.

## Do's and Don'ts

- Do use #F2F4F2 for the page and lift surfaces in small steps: #E9F6FE, #F7F8F7, #EBECEB, #FFFFFF.
- Do keep text in 4 levels: #0F0D0C, #141414, #838280, #8E8C8B.
- Do use #80C776 as the brand accent: header, logo and key highlights.
- Do reuse the measured spacing steps (8px, 12px, 24px).
- Do use 4px corners on most elements; larger surfaces also use 6px, 16px and 8px.
- Don't use #838280 for body text; it reaches 3.47:1 on #F2F4F2. Keep it for large text or metadata.
- Don't use #8E8C8B for body text; it reaches 3.03:1 on #F2F4F2. Keep it for large text or metadata.
- Don't introduce new font families beyond Instrument Sans.
- Don't use #80C776 for large backgrounds or body text.
- Don't make interface transitions slower than 0.36s.

## Motion

Interface transitions are quick: 0.14s, 0.12s, 0.2s, 0.3s. Longer ambient animations run 13.824s, 4.8s.

- **Easing:** `ease-out`, `ease`, `ease-in-out`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/qoder.com/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).