Hiếu Phạm Xuân (xuanhieu.org)

Generated Oct 15, 2026

DESIGN.md for www.timviecremote.com

www.timviecremote.com7 colors5 componentsInter

Remix

12 screenshots captured· www.timviecremote.com

1 / 12 · Tìm Việc Remote — Việc làm remote cho người Việt · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Timviecremote
description: |
  Tìm Việc Remote employs a refined, minimalist aesthetic centered on
  accessibility and clarity for a Vietnamese remote job marketplace. The design
  prioritizes content legibility and trust through generous whitespace, subtle
  neutral tones, and decisive dark typography. The palette is deliberately
  restrained—a near-white canvas with true white surfaces, soft hairline
  borders, and a single dark brand accent that anchors all interactive elements.
  Rather than relying on color to guide the user, the system uses weight
  hierarchy, spacing rhythm, and contained card compositions. The mood is
  professional yet approachable, emphasizing job search as a considered,
  uncluttered experience. Micro-interactions—subtle hover states and minimal
  shadows—provide feedback without distraction, reinforcing confidence in the
  platform's functionality.
source:
  url: "https://www.timviecremote.com/"
  pagesAnalyzed: 6
  extractedAt: 2026-10-15
  tokensMeasured: true
colors:
  primary: "#1A1A1A"
  canvas: "#F7F6F3"
  surface: "#FFFFFF"
  on-primary: "#FFFFFF"
  ink: "#1A1A1A"
  body: "#404040"
  muted: "#6B6B6B"
  hairline: "#DDDAD5"
  neutral-1: "#EBE9E5"
typography:
  heading-lg:
    fontFamily: Inter
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.11
    letterSpacing: -0.9px
  heading-md:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: -0.6px
  heading-md-2:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: 0px
  heading-sm:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.56
    letterSpacing: 0px
  heading-xs:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  heading-xs-strong:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.38
    letterSpacing: 0px
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  body-sm-strong:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.43
    letterSpacing: -0.35px
  body-sm-2:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.43
    letterSpacing: 0px
  body-xs:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  body-xs-loose:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.63
    letterSpacing: 0px
  caption-md:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px
  caption-sm:
    fontFamily: Inter
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  caption-xs:
    fontFamily: Inter
    fontSize: 10px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px
  code-md:
    fontFamily: "JetBrains Mono"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.43
    letterSpacing: 0px
  code-sm:
    fontFamily: "JetBrains Mono"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  code-xs:
    fontFamily: "JetBrains Mono"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  code-xs-strong:
    fontFamily: "JetBrains Mono"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 5px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 32px
  xxxl: 40px
  section: 80px
  band: 120px
borderWidths:
  thin: 1px
shadows:
  sm: "rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
elevationStrategy: single-tier
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#F7F6F3"
    surface: "#FFFFFF"
    surfaceRaised: "#F6F6F6"
    text: "#1A1A1A"
    textMuted: "#404040"
    border: "#DDDAD5"
    accent: "#1A1A1A"
    accentFg: "#FFFFFF"
    focusRing: "#1A1A1A"
    elevation: shadow
  dark:
    bg: "#0F0F10"
    surface: "#1D1D1E"
    surfaceRaised: "#29292A"
    text: "#F6F6F6"
    textMuted: "#9E9E9F"
    border: "#353536"
    accent: "#808080"
    accentFg: "#0B0B0C"
    focusRing: "#616161"
    elevation: "border+surface"
gradients:
  - context: section
    kind: linear
    value: "linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4))"
components:
  button-filled:
    typography: "{typography.body-xs}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.hairline}"
    height: 30px
    padding: "6px 12px 6px 12px"
    rounded: "{rounded.full}"
    backgroundColor: "{colors.surface}"
  button-primary:
    typography: "{typography.caption-md}"
    textColor: "{colors.canvas}"
    height: 32px
    padding: "0px 12px 0px 12px"
    rounded: "{rounded.sm}"
    backgroundColor: "{colors.primary}"
  button-icon:
    typography: "{typography.body-md}"
    textColor: "{colors.canvas}"
    height: 32px
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.primary}"
  button-outline:
    typography: "{typography.body-sm}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.hairline}"
    height: 38px
    padding: "8px 16px 8px 16px"
    rounded: "{rounded.full}"
    backgroundColor: "{colors.canvas}"
  button-icon-lg:
    typography: "{typography.heading-xs}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.hairline}"
    height: 36px
    rounded: "{rounded.sm}"
  card:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.hairline}"
    padding: "16px 16px 16px 16px"
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
    rounded: "{rounded.lg}"
    backgroundColor: "{colors.surface}"
  card-sm:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
    border: "1px solid rgba(221, 218, 213, 0.6)"
    padding: "20px 20px 20px 20px"
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
    rounded: "{rounded.xl}"
  navigation:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
    height: 36px
  footer:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.hairline}"
  link:
    typography: "{typography.caption-md}"
    textColor: "{colors.ink}"
    padding: "0px 12px 0px 12px"
    rounded: "{rounded.sm}"
  link-sm:
    typography: "{typography.body-xs}"
    textColor: "{colors.muted}"
states:
  other-hover:
    target: other
    state: hover
    opacity: 0.8
  other-focus:
    target: other
    state: focus
    outline: "transparent solid 2px"
    outlineColor: transparent
    outlineWidth: 2px
  other-focus-visible:
    target: other
    state: focus-visible
    outline: "transparent solid 2px"
    outlineColor: transparent
    outlineWidth: 2px
  other-disabled:
    target: other
    state: disabled
    opacity: 0.5
  button-focus-visible:
    target: button
    state: focus-visible
    boxShadow: "rgba(0, 0, 0, 0.4) 0px 0px 0px 2px"
breakpoints:
  - width: 375
    containerWidth: 327
    gridColumns: 1
    navLinksVisible: 6
    menuToggleVisible: true
    headingPx: 30
    bodyPx: 16
    sectionPaddingX: 24
  - width: 768
    containerWidth: 720
    gridColumns: 3
    navLinksVisible: 7
    menuToggleVisible: true
    headingPx: 36
    bodyPx: 16
    sectionPaddingX: 24
  - width: 1024
    containerWidth: 976
    gridColumns: 4
    navLinksVisible: 7
    menuToggleVisible: true
    headingPx: 36
    bodyPx: 16
    sectionPaddingX: 24
  - width: 1280
    containerWidth: 1200
    gridColumns: 4
    navLinksVisible: 7
    menuToggleVisible: true
    headingPx: 36
    bodyPx: 16
    sectionPaddingX: 24
  - width: 1440
    containerWidth: 1200
    gridColumns: 4
    navLinksVisible: 7
    menuToggleVisible: true
    headingPx: 36
    bodyPx: 16
    sectionPaddingX: 24
coverage:
  statesFound: 28
  gradientsFound: 1
  rolesUnassigned: 1
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: false
  semanticRampDeclared: false

Design System Inspired by Tìm Việc Remote

1. Visual Theme & Atmosphere

Tìm Việc Remote employs a refined, minimalist aesthetic centered on accessibility and clarity for a Vietnamese remote job marketplace. The design prioritizes content legibility and trust through generous whitespace, subtle neutral tones, and decisive dark typography. The palette is deliberately restrained—a near-white canvas with true white surfaces, soft hairline borders, and a single dark brand accent that anchors all interactive elements. Rather than relying on color to guide the user, the system uses weight hierarchy, spacing rhythm, and contained card compositions. The mood is professional yet approachable, emphasizing job search as a considered, uncluttered experience. Micro-interactions—subtle hover states and minimal shadows—provide feedback without distraction, reinforcing confidence in the platform's functionality.

Key Characteristics

Warm neutral palette anchored by {colors.primary} (#1A1A1A) for all primary actions
Generous whitespace and consistent rhythm via {spacing.md} and {spacing.lg} increments
Pill-shaped buttons ({rounded.full}) contrasted with rounded cards ({rounded.lg})
Single-tier shadow system: cards carry minimal lift; depth comes from color blocking
Typography-driven hierarchy with consistent weight steps (400 → 500 → 600 → 700)
Warm canvas background ({colors.canvas} — #F7F6F3) softens the interface
High contrast dark text ({colors.primary} and {colors.body}) ensures legibility
Hairline borders ({colors.hairline} — #DDDAD5) subdivide content without heaviness

2. Color Palette & Roles

Primary

Primary / Brand Ink ({colors.primary} — #1A1A1A): Primary CTA fills, brand mark, headings, active states, and all primary text; provides maximum contrast against light surfaces

Interactive

Primary CTA ({colors.primary} — #1A1A1A): Button fills, links, and interactive affordances
Primary Ghost / Outline ({colors.canvas} — #F7F6F3): Outline button fills; creates visual separation on default background

Neutral Scale

Canvas ({colors.canvas} — #F7F6F3): Default page background; warm off-white base
Surface ({colors.surface} — #FFFFFF): Card and panel backgrounds; primary content container
Body Text ({colors.body} — #404040): Body copy and secondary headings
Muted Text ({colors.muted} — #6B6B6B): Captions, secondary labels, and de-emphasized content

Surface & Borders

Hairline ({colors.hairline} — #DDDAD5): 1px dividers, card borders, and subtle separators
Neutral Accent ({colors.neutral-1} — #EBE9E5): Decorative accent; measured but role undefined; used for subtle background accents

3. Typography Rules

Font Family

Primary: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif

Secondary (Code): JetBrains Mono, Courier New, monospace

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display Large	Inter	36px	600	1.11	−0.9px	Hero headlines; tightest tracking
Display Medium	Inter	24px	600	1.33	−0.6px	Section headings; strong presence
Heading Small	Inter	18px	600	1.56	0px	Card titles and subsections
Heading XS Strong	Inter	14px	600	1.38	0px	Accent headings
Heading XS	Inter	14px	500	1.43	0px	Secondary headings
Body Medium	Inter	16px	400	1.5	0px	Primary body text; default link target
Body Small	Inter	14px	400	1.43	0px	Common body size; button text
Body Small Strong	Inter	14px	600	1.43	−0.35px	Emphasis within body
Body Small Bold	Inter	14px	700	1.43	0px	Strong emphasis
Body XS	Inter	12px	400	1.33	0px	Nav links, labels
Body XS Loose	Inter	12px	400	1.63	0px	Spacious captions
Caption Medium	Inter	12px	500	1.33	0px	Metadata, timestamps
Caption Small	Inter	11px	500	1.5	0px	Fine print
Caption XS	Inter	10px	600	1.5	0px	Minimal labels
Code Medium	JetBrains Mono	14px	600	1.43	0px	Highlighted code blocks
Code Small	JetBrains Mono	12px	400	1.33	0px	Inline code
Code XS	JetBrains Mono	11px	400	1.5	0px	Minimal code references
Code XS Strong	JetBrains Mono	11px	500	1	0px	Code emphasis

Principles

Weight progression: 400 (regular) → 500 (medium) → 600 (semibold) → 700 (bold) aligns action hierarchy
Tight tracking on display: Headings above 18px carry negative letter-spacing (−0.9px to −0.35px) for visual impact
Neutral letter-spacing on body: All body and UI text sits at 0px, ensuring readability in dense content
Line height correlation: Larger sizes compress line height (1.11–1.33); smaller sizes expand (1.5–1.63) for clarity
Code family separation: Monospace reserved for code blocks and technical references; never mixed with body prose

4. Component Stylings

Buttons

Primary Button

Background: {colors.primary} (#1A1A1A)
Text Color: {colors.surface} (#FFFFFF)
Padding: 0px 12px
Height: 32px
Font: {typography.body-xs} (12px, 500, line-height 1.33)
Border Radius: {rounded.sm} (6px)
Border: none
Box Shadow: none
Focus Visible: rgba(0, 0, 0, 0.4) 0px 0px 0px 2px (focus ring)

Outline Button

Background: {colors.canvas} (#F7F6F3)
Text Color: {colors.primary} (#1A1A1A)
Padding: 8px 16px
Height: 38px
Font: {typography.body-sm} (14px, 400, line-height 1.43)
Border Radius: {rounded.full} (9999px)
Border: 1px solid {colors.hairline} (#DDDAD5)
Box Shadow: none
Hover: Border color becomes var(--normal-border-hover)

Ghost / Filled Button

Background: {colors.surface} (#FFFFFF)
Text Color: {colors.primary} (#1A1A1A)
Padding: 6px 12px
Height: 30px
Font: {typography.body-xs} (12px, 400, line-height 1.33)
Border Radius: {rounded.full} (9999px)
Border: 1px solid {colors.hairline} (#DDDAD5)
Box Shadow: none
Hover: Border color becomes var(--gray5) or var(--normal-border-hover)

Icon Button (Small)

Background: {colors.primary} (#1A1A1A)
Text Color: {colors.surface} (#FFFFFF)
Width / Height: 32px
Font Size: 16px
Border Radius: {rounded.xs} (5px)
Padding: 0
Border: none

Icon Button (Large)

Background: transparent
Text Color: {colors.primary} (#1A1A1A)
Width / Height: 36px
Font: {typography.heading-xs} (14px, 500, line-height 1.43)
Border Radius: {rounded.sm} (6px)
Border: 1px solid {colors.hairline} (#DDDAD5)
Padding: 0

Cards & Containers

Card (Default)

Background: {colors.surface} (#FFFFFF)
Text Color: {colors.primary} (#1A1A1A)
Padding: 16px
Border Radius: {rounded.lg} (12px)
Border: 1px solid {colors.hairline} (#DDDAD5)
Font: {typography.body-md} (16px, 400, line-height 1.5)
Box Shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px
Hover: Subtle background color shift (minimal elevation)

Card (Small / Subtle)

Background: transparent
Text Color: {colors.primary} (#1A1A1A)
Padding: 20px
Border Radius: {rounded.xl} (16px)
Border: 1px solid rgba(221, 218, 213, 0.6) (60% opacity hairline)
Font: {typography.body-md} (16px, 400, line-height 1.5)
Box Shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px

Inputs & Forms

Structural data only; full form state system not observed in extraction.

Default text size: {typography.body-sm} (14px)
Border radius: {rounded.md} (8px)
Border color: {colors.hairline} (#DDDAD5)

Navigation

Nav Link (Default)

Text Color: {colors.primary} (#1A1A1A)
Font: {typography.body-md} (16px, 400, line-height 1.5)
Background: transparent
Padding: 0
Border: none
Hover: Text color shifts to hsl(var(--foreground)) (full emphasis)

Nav Link (Secondary)

Text Color: {colors.muted} (#6B6B6B)
Font: {typography.body-xs} (12px, 400, line-height 1.33)
Background: transparent
Padding: 0
Border: none

5. Layout Principles

Spacing System

Base unit: {spacing.xxs} = 4px

Scale:

{spacing.xxs} = 4px — Micro-spacing between inline elements
{spacing.xs} = 8px — Tight component margins
{spacing.sm} = 12px — Small breathing room
{spacing.md} = 16px — Standard card padding and component gaps
{spacing.lg} = 20px — Section dividers and larger component spacing
{spacing.xl} = 24px — Major section spacing and page margins
{spacing.xxl} = 32px — Large section breaks
{spacing.xxxl} = 40px — Extra-large section spacing
{spacing.section} = 80px — Full-width section vertical margins
{spacing.band} = 120px — Maximum section spacing (hero, major feature areas)

Usage context:

Button padding: {spacing.xs} to {spacing.md}
Card padding: {spacing.md} (16px)
Section padding-top/bottom: {spacing.section} (80px) down to {spacing.xl} (24px) depending on hierarchy
Margin between cards: {spacing.md} to {spacing.lg}

Grid & Container

Max container width: 1200px (capped at 1280px+ viewports)
Column strategy: Responsive grid shifts from 1 column (375px) → 3 columns (768px) → 4 columns (1024px+)
Content column widths:
- 375px viewport: 327px (48px left/right margin)
- 768px: 720px (24px left/right margin)
- 1024px+: 976px or 1200px capped (auto-centered, max-width constraint)
Section pattern: Hero section spans full width with centered copy; job cards grid flows below in responsive columns
Horizontal margin: Consistent {spacing.xl} (24px) on all viewports (not viewport-dependent)

Whitespace Philosophy

Whitespace is functional and generous. The system leverages the warm canvas background ({colors.canvas}) to create breathing room between content blocks. Cards sit on this background, creating clear visual separation through surface color change rather than borders alone. Vertical rhythm follows the spacing scale exactly; no optical adjustments override the grid. Headings sit flush with their sections (no extra top margin); body text maintains {spacing.md} gaps below; cards maintain {spacing.md} to {spacing.lg} vertical spacing.

Border Radius Scale

{rounded.none} = 0px — Footer and flat structural elements
{rounded.xs} = 5px — Small icon buttons
{rounded.sm} = 6px — Primary button, large icon buttons, narrow interactive targets
{rounded.md} = 8px — Card containers (alternative)
{rounded.lg} = 12px — Standard card radius (primary card role)
{rounded.xl} = 16px — Subtle/transparent card variants
{rounded.full} = 9999px — Pill-shaped buttons (outline, ghost, filled)

Border Widths

Thin (1px): Primary border weight for hairlines, card borders, button outlines; applied to all card edges and interactive control outlines

6. Depth & Elevation

Level	Treatment	Use
Flat	No shadow; `box-shadow: none`	Navigation, footer, transparent backgrounds
Card Lift	`rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`	Standard card containers, minor elevation
Focus Ring	`rgba(0, 0, 0, 0.1) 0px 4px 12px, rgba(0, 0, 0, 0.2) 0px 0px 0px 2px`	Interactive focus states (buttons, links)
Focus Tight	`rgba(0, 0, 0, 0.4) 0px 0px 0px 2px`	Button-specific focus ring

Shadow Philosophy: The system employs a single-tier elevation strategy built on color blocking rather than layered shadows. The primary card shadow is minimal (rgba(0, 0, 0, 0.05) 0px 1px 2px 0px)—barely perceptible—to maintain the flat, print-like aesthetic. Depth comes from surface color (white cards on warm canvas). Focus states introduce a slightly heavier shadow (rgba(0, 0, 0, 0.1) 0px 4px 12px) paired with a thin focus ring to signal keyboard navigation clearly. No dropdowns, modals, or elevated overlays use heavy shadows; the system stays visually grounded.

Opacity Levels

Full: 1 (default)
Disabled / Hover Reduction: 0.6 (60%) — Applied to disabled states and subtle hover transitions
Border Fade: 0.6 (60%) — Small card border opacity (rgba(221, 218, 213, 0.6))
Overlay / Decorative: Gradient overlays use rgba(255, 255, 255, 0.9) and rgba(255, 255, 255, 0.4) for section backgrounds

Z-index / Layering

Base: 0 (default)
Dropdown: 30–40 (navigation menus, select lists)
Modal / Toast: Higher implicit stacking (not measured; extraction does not specify ceiling)

7. Do's and Don'ts

Do

Use {colors.primary} (#1A1A1A) for all primary CTAs. Every button that drives user action (submit, login, view job) fills with this dark ink.
Apply pill-shaped radius ({rounded.full} — 9999px) to all outline and ghost buttons to signal secondary importance and non-destructive interaction.
Maintain card padding at {spacing.md} (16px). Do not compress or expand without explicit spacing scale values.
Layer typography by weight, not size alone. Use 600–700 weight for headings; 400–500 for body; 500–600 for UI labels.
Constrain heading letter-spacing to the exact measured values (−0.9px for 36px display; −0.6px for 24px; 0px for smaller sizes).
Build layout grids from the spacing scale. Every margin and padding must be a multiple of {spacing.xs} (8px).
Use {colors.hairline} (#DDDAD5) for all 1px borders. Never substitute with darker grays or lighter neutrals.
Pair white cards ({colors.surface}) with the warm canvas background ({colors.canvas}) to create subtle depth without shadows.
Test focus states with keyboard navigation. Apply the focus ring at rgba(0, 0, 0, 0.2) 0px 0px 0px 2px to all interactive elements.
Keep button padding symmetrical: {spacing.xs} horizontal, {spacing.xxs} vertical for compact sizes; {spacing.md} horizontal, {spacing.sm} vertical for larger actions.

Don't

Do not invent new colors. The palette is closed: {colors.primary}, {colors.surface}, {colors.canvas}, {colors.body}, {colors.muted}, {colors.hairline}, and {colors.neutral-1} only.
Do not use rounded corners on footer or large structural elements. Stick to {rounded.none} (0px) for full-width sections.
Do not apply shadows to cards beyond rgba(0, 0, 0, 0.05) 0px 1px 2px 0px. Heavier shadows break the flat, content-first aesthetic.
Do not mix typefaces within a single visual line. Inter is primary; JetBrains Mono is code only.
Do not set letter-spacing to 0px on display headings. Apply the negative tracking exactly as specified (−0.9px, −0.6px) to maintain visual hierarchy.
Do not use more than one background color per layout region. Alternate between {colors.canvas} and {colors.surface} only; no tertiary surfaces.
Do not remove focus rings or outline on interactive elements. Accessibility via keyboard is non-negotiable.
Do not compress {spacing.md} (16px) padding inside cards. Cards are scannable containers; maintain internal breathing room.
Do not apply opacity to text for emphasis. Use weight (600, 700) or color (muted, primary) instead.
Do not use pill buttons for primary, destructive, or permanent actions. Pill radius signals toggle or secondary choice; use {rounded.sm} (6px) for confident primary CTAs.

8. Responsive Behavior

Breakpoints

Viewport	Max Width	Grid Columns	Content Column	Largest Heading	Body Text	Horizontal Margin	Notes
375px	327px	1	327px	30px	16px	24px	Mobile; single column; menu toggle visible
768px	720px	3	720px	36px	16px	24px	Tablet; three-column job grid begins
1024px	976px	4	976px	36px	16px	24px	Desktop; four-column grid
1280px	1200px	4	1200px	36px	16px	24px	Large screen; max-width capped
1440px	1200px	4	1200px	36px	16px	24px	Ultra-wide; layout stays 1200px capped

Breakpoint transitions:

Mobile → Tablet (768px): Grid expands from 1 → 3 columns; heading remains at largest size
Tablet → Desktop (1024px): Grid expands 3 → 4 columns; content column widens to 976px
Desktop → Max Width (1280px+): Layout caps at 1200px with auto-centering; no horizontal scaling beyond this point

Touch Targets

Minimum interactive size: 32px × 32px (icon buttons measured at this size)
Minimum button height: 30px (ghost/filled), 32px (primary), 36px–38px (outline)
Minimum button width: 30–40px for icon buttons; 60px minimum for text buttons
Link padding: 0 12px with 32px height ensures safe tap zones on mobile

Collapsing Strategy

Typography: Headings remain constant across viewports (36px hero, 24px sections); body text does not scale
Spacing: Horizontal margin stays at {spacing.xl} (24px) on all viewports; vertical section spacing compresses proportionally on mobile (e.g., {spacing.section} 80px → {spacing.xl} 24px for mobile sections)
Grid: Single column on mobile; 3 columns at 768px; 4 columns at 1024px+
Navigation: Menu toggle appears on mobile (375px); all nav links visible at 768px+ (7 links shown across tested breakpoints)
Button width: Constrained to container width on mobile; expands on tablet/desktop
Card width: Full container width on mobile; equal grid distribution on tablet/desktop

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Primary Ink ({colors.primary} — #1A1A1A) — use for all buttons, headings, and emphasized text
Background: Canvas ({colors.canvas} — #F7F6F3) — warm off-white page background
Card/Panel: Surface ({colors.surface} — #FFFFFF) — white containers on canvas
Heading text: Primary Ink ({colors.primary} — #1A1A1A) — all headings
Body text: Body ({colors.body} — #404040) — primary paragraph text
Secondary text: Muted ({colors.muted} — #6B6B6B) — captions, metadata
Borders: Hairline ({colors.hairline} — #DDDAD5) — 1px dividers, card edges, outlines

Iteration Guide

All primary actions fill with {colors.primary} (#1A1A1A); text inverts to white. No exceptions for emphasis or brand variations.
Button radius is context-dependent: Pill ({rounded.full} — 9999px) for outline/secondary; {rounded.sm} (6px) for primary; {rounded.xs} (5px) for icon-only.
Spacing must always scale from {spacing.xs} (8px) increments. No arbitrary padding; every margin is 8px, 12px, 16px, 20px, etc.
Typography weight drives hierarchy: 400 body, 500 UI, 600 headings, 700 emphasis. Do not mix weights on the same role.
Cards carry exactly rgba(0, 0, 0, 0.05) 0px 1px 2px 0px shadow. Anything heavier breaks the flat aesthetic.
Hairline borders are always {colors.hairline} (#DDDAD5) at 1px width. No substitutions; no opacity changes except in "subtle card" variant (0.6 opacity).
Focus states must include both a visible focus ring and a shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 2px for standard focus; rgba(0, 0, 0, 0.4) 0px 0px 0px 2px for buttons.
Grid breakpoints are 375px (1 col) → 768px (3 col) → 1024px (4 col); content width caps at 1200px.
Horizontal margin is always {spacing.xl} (24px) on every viewport. Vertical section spacing compresses on mobile.
Typography hierarchy: Display (36px, −0.9px) > Heading (24px, −0.6px) > Body (16px, 0px) > UI (12–14px, 0px). Each role has a fixed size; no scaling.

10. Known Gaps

No semantic color ramp: The site does not expose error, success, or warning states in its stylesheets. No status colors were measured; do not invent a red/green/amber palette.
No dark mode: Extraction captured one theme only (light). No dark-mode tokens exist in the published system; if dark mode is needed, it must be derived or added separately.
One unmapped color: {colors.neutral-1} (#EBE9E5) was measured but has no declared role in the component markup. It functions as a decorative accent; its usage pattern is unclear from 6 pages of coverage.
Limited interaction state data: Extraction detected generic :hover and :focus-visible rules (e.g., opacity 0.8–0.9, border color shifts) but not exhaustive per-component state coverage. Disabled, error, loading, and success button states were not observed; implement these conservatively or defer to brand guidelines.
Form validation not captured: Input focus, error, and success states were not present in measured pages. Full form system (floating labels, error text styling, success checkmarks) is not specified.
Dropdown / modal styling incomplete: Z-index values (30, 40) were detected but dropdown background color, text, padding, and animation timings were not measured.
Footer structure unclear: Footer was measured as a flat 1px-bordered container but internal link styling, column layout, and social links styling are not detailed.
Animation / transition timing: No CSS transition or animation durations were extracted. Hover and focus effects are state changes only; easing and timing remain unspecified.
Icon set and imagery: No icon library, SVG paths, or image aspect ratio standards were captured; these belong to a separate icon system document.
Breakpoint behavior at exactly 768px and 1024px: Measurements confirm grid column changes at these points, but the exact CSS media query syntax (min-width vs max-width, inclusive vs exclusive) is inferred from behavioral data only.
Surfaces behind authentication: Only public pages (home, job listings, article page) were analyzed. Logged-in dashboard, profile, and settings pages are out of scope.

TOKENS

tokens:
  colors:
    primary:
      value: "#1A1A1A"
      description: "Primary brand ink; button fills, headings, text"
    canvas:
      value: "#F7F6F3"
      description: "Page background; warm neutral"
    surface:
      value: "#FFFFFF"
      description: "Card and panel background"
    body:
      value: "#404040"
      description: "Body copy text"
    muted:
      value: "#6B6B6B"
      description: "Secondary text, captions"
    hairline:
      value: "#DDDAD5"
      description: "1px borders, dividers"
    neutral-1:
      value: "#EBE9E5"
      description: "Decorative accent (role undefined)"
  
  typography:
    display-lg:
      font-family: "Inter"
      font-size: "36px"
      font-weight: 600
      line-height: 1.11
      letter-spacing: "-0.9px"
    display-md:
      font-family: "Inter"
      font-size: "24px"
      font-weight: 600
      line-height: 1.33
      letter-spacing: "-0.6px"
    heading-sm:
      font-family: "Inter"
      font-size: "18px"
      font-weight: 600
      line-height: 1.56
      letter-spacing: "0px"
    heading-xs-strong:
      font-family: "Inter"
      font-size: "14px"
      font-weight: 600
      line-height: 1.38
      letter-spacing: "0px"
    heading-xs:
      font-family: "Inter"
      font-size: "14px"
      font-weight: 500
      line-height: 1.43
      letter-spacing: "0px"
    body-md:
      font-family: "Inter"
      font-size: "16px"
      font-weight: 400
      line-height: 1.5
      letter-spacing: "0px"
    body-sm:
      font-family: "Inter"
      font-size: "14px"
      font-weight: 400
      line-height: 1.43
      letter-spacing: "0px"
    body-sm-strong:
      font-family: "Inter"
      font-size: "14px"
      font-weight: 600
      line-height: 1.43
      letter-spacing: "-0.35px"
    body-sm-bold:
      font-family: "Inter"
      font-size: "14px"
      font-weight: 700
      line-height: 1.43
      letter-spacing: "0px"
    body-xs:
      font-family: "Inter"
      font-size: "12px"
      font-weight: 400
      line-height: 1.33
      letter-spacing: "0px"
    body-xs-loose:
      font-family: "Inter"
      font-size: "12px"
      font-weight: 400
      line-height: 1.63
      letter-spacing: "0px"
    caption-md:
      font-family: "Inter"
      font-size: "12px"
      font-weight: 500
      line-height: 1.33
      letter-spacing: "0px"
    caption-sm:
      font-family: "Inter"
      font-size: "11px"
      font-weight: 500
      line-height: 1.5
      letter-spacing: "0px"
    caption-xs:
      font-family: "Inter"
      font-size: "10px"
      font-weight: 600
      line-height: 1.5
      letter-spacing: "0px"
    code-md:
      font-family: "JetBrains Mono"
      font-size: "14px"
      font-weight: 600
      line-height: 1.43
      letter-spacing: "0px"
    code-sm:
      font-family: "JetBrains Mono"
      font-size: "12px"
      font-weight: 400
      line-height: 1.33
      letter-spacing: "0px"
    code-xs:
      font-family: "JetBrains Mono"
      font-size: "11px"
      font-weight: 400
      line-height: 1.5
      letter-spacing: "0px"
    code-xs-strong:
      font-family: "JetBrains Mono"
      font-size: "11px"
      font-weight: 500
      line-height: 1
      letter-spacing: "0px"
  
  spacing:
    xxs: "4px"
    xs: "8px"
    sm: "12px"
    md: "16px"
    lg: "20px"
    xl: "24px"
    xxl: "32px"
    xxxl: "40px"
    section: "80px"
    band: "120px"
  
  rounded:
    none: "0px"
    xs: "5px"
    sm: "6px"
    md: "8px"
    lg: "12px"
    xl: "16px"
    full: "9999px"
  
  shadows:
    card:
      value: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
      description: "Card lift; minimal elevation"
  
  border-widths:
    thin: "1px"
  
  opacity:
    disabled: 0.6
    subtle: 0.6
  
  z-index:
    dropdown: 30
    dropdown-high: 40

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from www.timviecremote.com

Primary

#1A1A1A

Primary CTA, brand accent, active state; Headings / primary text

Neutral

#F7F6F3

Default page background

#FFFFFF

Card / panel background; label colour on brand surfaces

#404040

Body copy

#6B6B6B

Captions, secondary text

#DDDAD5

1px borders and dividers

#EBE9E5

Neutral

Typography · Inter

body14px · 400 · 20px

caption12px · 500 · 16px

body14px · 600 · 20px

h218px · 600 · 28px

link12px · 400 · 16px

h124px · 600 · 32px

body12px · 400 · 19.5px

link16px · 400 · 24px

nav-link12px · 400 · 16px

body14px · 700 · 20px

h136px · 600 · 40px

h314px · 600 · 19.25px

button14px · 400 · 20px

heading14px · 500 · 20px

body16px · 700 · 24px

caption11px · 500 · 16.5px

caption10px · 600 · 15px

h124px · 600 · 32px

h218px · 500 · 28px

h120px · 600 · 28px

h214px · 500 · 20px

Typography · JetBrains Mono

code11px · 500 · 11px

code14px · 600 · 20px

code12px · 400 · 16px

code11px · 400 · 16.5px

body12px · 400 · 16px

Spacing

4px

8px

24px

12px

120px

16px

32px

20px

Elevation

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px

Components · 5

Remixes of www.timviecremote.com

Latest remixes

No public remixes yet. Be the first to make one.

Remix it