cogon.studio

Overview

cogon.studio is a design and engineering studio that designs, builds, and operates its own software—maintaining complete ownership and control over the entire product lifecycle. The brand embodies **Decisive Minimalism**: a philosophy that rejects unnecessary ornamentation in favor of purposeful, load-bearing design. The aesthetic is rooted in forest-ink depth (#163300) paired with lime-action accents (#9fe870), creating a visual language that feels both grounded and energetic. The UI evokes quiet confidence and technical precision—the kind of interface that makes complex decisions feel inevitable rather than labored. The emotional response is one of clarity and trust: users sense that every pixel serves a function, every interaction is intentional, and the studio's work stays inside the studio because it's worth keeping.

The brand voice is direct, unsentimental, and precise. Vocabulary favors active verbs (build, run, deliver, decide) over passive descriptions. The tone never apologizes or hedges—it states facts with the calm authority of someone who has built something real. Example sentence in brand voice: "We design, build, and run. The work stays inside the studio." This sentence structure—short clauses, parallel construction, no filler—defines the entire communication strategy.

Colors

The color system operates on a **forest-ink and lime-action** principle: a deep, authoritative primary (#163300) anchors all interface elements and typography, while a vibrant lime accent (#9fe870) signals interactive moments, CTAs, and moments of emphasis. The primary color is not merely dark—it is a specific forest green that carries botanical weight and engineering precision. The accent is not a generic bright green but a lime that reads as energetic without being frivolous.

**Primary (#163300)** is used for body text, card backgrounds in dark contexts, navigation, and all default interactive states. **On-Primary (#f2f5f0)** is the light foreground text that sits atop primary surfaces, maintaining 7:1 contrast for accessibility. **Tertiary (#9fe870)**, the lime accent, is reserved excl

Typography

The type system uses **Plus Jakarta Sans Variable** as the primary typeface, a contemporary geometric sans-serif that pairs precision with warmth. Display sizes (94px, 800 weight) are reserved for hero headlines and major section breaks, set with tight line-height (104px) and negative letter-spacing (-0.04em) to create visual density and impact. Headline-lg (40px, 700 weight) is used for section titles and card headings. Body text (16px, 400 weight) maintains a generous 24px line-height (1.5) for readability across all screen sizes. Labels and UI text use 14px at 600 weight with 0.01em letter-spacing to add subtle emphasis without appearing artificial. All interactive elements (buttons, links) use 800 weight to signal clickability and importance. The type hierarchy communicates through wei

Layout

The page layout uses a **12-column grid** with a maximum container width of 1280px, allowing content to breathe on large screens while maintaining focus on smaller viewports. The grid is fluid: it scales from 100% width on mobile to 92% width (with auto margins) on desktop, never exceeding 1280px. Horizontal spacing (gutter) is consistently 24px between grid columns and section edges. Vertical rhythm is established through a spacing scale: 8px (unit), 12px (sm), 24px (md), 40px (lg), and 64px (xl). Section separation uses lg spacing (40px) for major breaks and md spacing (24px) for subsections. Hero sections occupy full viewport height with centered content. Cards and containers use md padding (24px) internally, with lg padding (40px) reserved for large feature cards. The marquee section (

Elevation & Depth

Depth in this system is achieved through **subtle shadow layering and strategic color shifts** rather than dramatic drop shadows. The elevation scale defines three levels: Level 1 (Base) uses no shadow, relying on the white background (#ffffff) as the foundation. Level 2 (Standard Card) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, close shadow that suggests the card is slightly lifted. Level 3 (Elevated/Modal) uses box-shadow: 0 24px 60px rgba(22, 51, 0, 0.16), a larger, more diffuse shadow that creates clear separation from the background. Dark-mode cards (primary backg

Shapes

The shape language follows **Technical Softness**: sharp corners are avoided in favor of rounded edges that feel engineered rather than organic. Buttons use full border-radius (999px), creating pill-shaped forms that are immediately recognizable as interactive. Cards and containers use lg radius (1rem / 16px) for standard content areas and xl radius (1.5rem / 24px) for featured or elevated cards. Input fields use DEFAULT radius (0.5rem / 8px), a subtle rounding that suggests form without drawing attention. The hero video frame uses xl radius (1.5rem / 24px) with a 2px border in primary color,

Components

**Action Elements**: Primary buttons use tertiary background (#9fe870) with on-tertiary text (#163300), 800 font-weight, and full border-radius (999px). Padding is 12px horizontal × 28px vertical, creating a 48px total height. On hover, the background transitions to primary-fixed-dim (#9fe870 at 80% opacity) with a 150ms ease transition. Secondary buttons are text-only with a 2px bottom border in primary color (#163300), no background fill, and body-md typography. On hover, the border remains but the text color shifts to primary-container (#2d4d1a). Ghost buttons use transparent background with primary text and full border-radius, appearing in navigation and secondary contexts.

**Containers & Surfaces**: Dark cards use primary background (#163300) with on-primary text (#f2f5f0), xl border

Do's and Don'ts

**Do**

• Do use the lime accent (#9fe870) exclusively for primary CTAs and interactive focus states—never use it for passive elements or backgrounds.
• Do maintain the 8px spacing unit as the foundation for all padding, margin, and gap values; multiples of 8px create visual rhythm and alignment.
• Do apply 800 font-weight to all interactive elements (buttons, links) to signal clickability without relying on color alone.
• Do use the full border-radius (999px) for buttons and the lg radius (1rem) for cards; consistency in the radius scale is more important than variety.
• Do pair dark cards (primary background) with light text (on-primary) and light cards (surface-container) with dark text (on-surface) to maintain 7:1 contrast.
• Do use box-shadow: 0 24px 60px rgba(22, 51, 0, 0.16) for elevated cards and modals; this specific shadow value is calibrated to the primary color.

**Don't**

• Don't use the primary color (#163300) as a background for small UI elements like badges or tags—use tertiary-container (#d4f5b8) instead.
• Don't apply shadows to dark-mode cards; rely on the high contrast between the dark card and light background to establish hierarchy.
• Don't mix border-radius values arbitrarily; stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency.
• Don't use the secondary color (#e8ebe6) as a text color; it is reserved for subtle surface variations and backgrounds only.
• Don't reduce the font-weight of interactive elements below 600; 400-weight text should never be clickable.
• Don't apply the lime accent (#9fe870) to more than 15% of the page at any given time; it loses impact through overuse.