Outsource Consultants, Inc.

Overview

Outsource Consultants, Inc. is a B2B municipal consulting firm that accelerates building code approvals and zoning permits in New York City. The design system embodies Architectural Precision—a movement rooted in grid-based geometry, high-contrast color, and technical clarity. The aesthetic evokes the precision of blueprints and municipal documentation, transforming complex regulatory processes into navigable, authoritative interfaces. The brand personality is direct, expert, and uncompromising: every pixel serves a function, every color choice signals hierarchy or action. Voice: confident, technical but accessible, never casual. Example: "Your permit clears the DOB review in 14 days—here's the compliance checklist."

Colors

The color system is built on a stark primary-secondary contrast: Primary (#1925aa, a deep cobalt) commands attention on CTAs, navigation, and interactive states, signaling authority and trust in a regulated industry. Secondary (#e8e6e0, a warm mercury) provides breathing room and surface definition, creating visual rest against the intensity of the primary. The surface stack (white #ffffff down to #d8d5cd) establishes a neutral, professional foundation; on-surface text (#1a1a1a) ensures legibility at all scales. Tertiary (#505050, a mid-gray) supports secondary information and disabled states. Error (#c41230, a municipal red) is reserved for critical warnings and compliance failures. All interactive elements use a 1px solid border at {colors.outline-variant} (#d0d0d0) to reinforce the grid

Typography

The type system pairs PP Neue Montreal (humanist sans-serif, weights 400–700) for all body and headline content with GT America Mono (geometric monospace, weight 500) for labels, metadata, and technical callouts. Display (72px, 700 weight, -0.02em tracking) anchors hero sections with monumental presence. Headline-lg (48px, 600 weight) breaks major sections. Body-md (16px, 400 weight, 24px line-height) is the workhorse for form labels, card content, and navigation. Label-md (12px, 500 weight, 0.05em tracking in GT America Mono) marks form inputs, badges, and tertiary navigation—the monospace weight and letter-spacing (0.05em) evoke technical precision and regulatory documentation. Apply text-rendering: optimizeLegibility on all body text; use font-feature-settings: 'ss01' on PP Neue Montrea

Layout

The layout operates on a 12-column grid with a max-width of 1280px, enforced at the container level. Sections use lg spacing (40px) for vertical rhythm; cards and form groups use md spacing (24px) for internal breathing room. The gutter is fixed at 24px on desktop, collapsing to sm (12px) on mobile. White-space is generous and intentional—never cramped. The header is fixed and uses a split-column layout (60vw for logo/nav on mobile, 12-column on desktop) to maintain visual hierarchy while adapting to viewport. Container padding is always gutter (24px), never less. Sections are separated by full-width dividers (1px solid {colors.outline-variant}) to reinforce the grid and create visual compartmentalization.

Elevation & Depth

Depth is conveyed through subtle shadows and border definition, never through color darkening. Level 1 (Base): flat white surface (#ffffff) with no shadow. Level 2 (Cards, inputs): 1px solid border at {colors.outline-variant} (#d0d0d0) + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Modals, dropdowns, elevated cards): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) + 1px solid border. Hover states elevate by one level (Level 2 → Level 3). Focus states add a 2px inset ring at rgba(25, 37, 170, 0.1) (primary with 10% opacity) to maintain accessibility without breaking the minimalist aesthetic.

Shapes

The shape philosophy is Geometric Minimalism: border-radius is minimal and consistent, reinforcing the grid-based, technical nature of the brand. All buttons, inputs, and cards use rounded: DEFAULT (0.5rem / 8px). Badges and pills use rounded: full (9999px) only when semantically appropriate (e.g., status indicators). No organic or heavily rounded corners; the sharp geometry mirrors the precision of building codes and municipal systems. Dividers and borders are always 1px solid, never gradated or blurred.

Components

Action Elements Buttons are the primary interaction pattern. Button-primary (#1925aa on white, 48px height, 12px 24px padding, 0.5rem radius, 1px solid border) is used for primary CTAs (e.g., 'Start Permit Review'). Button-primary-hover shifts to #0d1355 (primary-container) with matching border. Button-secondary (#e8e6e0 background, #1925aa text) is used for secondary actions (e.g., 'Learn More'). Button-ghost (transparent background, #1925aa text, 1px border) is used for tertiary actions or navigation. All buttons use label-md typography (GT America Mono, 12px, 500 weight, 0.05em tracking) for technical precision. Hover transitions apply a 150ms cubic-bezier(0.4, 0, 0.2, 1) ease.

Containers & Surfaces Cards use a white background (#ffffff) with a 1px solid border (#d0d0d0) and 24

Do's and Don'ts

**Do**

• Do use primary (#1925aa) exclusively for CTAs, focus states, and key interactive elements—never for body text or backgrounds.
• Do maintain 1px solid borders on all cards, inputs, and buttons to reinforce the grid-based, technical aesthetic.
• Do apply lg spacing (40px) between major sections and md spacing (24px) within card groups to establish clear visual hierarchy.
• Do use GT America Mono (label-md: 12px, 500 weight, 0.05em tracking) for all labels, badges, and metadata to signal technical precision.
• Do keep border-radius at 0.5rem (8px) for buttons and inputs; use full (9999px) only for semantic badges or pills.

**Don't**

• Don't use rounded corners larger than 1rem except for full-circle badges; the sharp geometry is core to the brand.
• Don't apply gradients or color blends; the palette is flat and decisive—primary, secondary, tertiary, and neutral only.
• Don't use shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12); depth is subtle, never dramatic.
• Don't mix font families within a single component; PP Neue Montreal for body/headlines, GT America Mono for labels only.
• Don't apply color to disabled states; use #e9ecef background with #6c757d text and cursor: not-allowed instead.