okaydev.co — Design System

1. Visual Theme & Atmosphere

okaydev.co occupies a specific niche: developer tooling or community with personality. The design is built on a base of near-absolute black (#0c0c0c) and white (#ffffff), but what distinguishes it is a deliberate yellow accent — rgb(238, 230, 66) — that reads as both energetic and technical, like a terminal highlight or a linter warning badge. The typography is activated via an extensive set of OpenType features: contextual alternates, discretionary ligatures, stylistic sets (ss05, ss06, ss07, ss12) — signals of a type-obsessed team that chose a font specifically because of its expressiveness at the glyph level. The overall character is bold, opinionated, and slightly irreverent. This is a product site that refuses to be generic.

2. Color Palette & Roles

The system is token-first, defined through RGB component variables for composability.

What’s absent: No blue. No brand purple. No gradients. The chromatic strategy is surgical: one yellow accent in an otherwise achromatic system. The --color-bg-*-rgb pattern (storing raw RGB triples) enables rgba() composition throughout — a sophisticated token approach.

3. Typography Rules

• Primary font: A custom typeface with rich OpenType activation — "case", "dlig" (discretionary ligatures), "ss05", "ss06", "ss07", "ss12" enabled; "ss12" 0 disabling one stylistic set. Based on the feature set, this is likely a grotesque or geometric sans with character variants (possibly Söhne, Neue Haas Grotesk, or similar).
• Monospace: System mono stack — Monaco, Menlo, Courier, Lucida Console — for code and technical content.
• Fallback mono: --fallbackfontmono variable suggests a defined fallback for the custom mono face.

Letter-spacing: Normal; the OpenType features handle opticals. Text transform: None.

4. Component Stylings

• Cards: card-asset-bg token suggests image or asset cards with controlled background fills. Card surfaces likely use the gray-light spectrum for differentiation.
• Buttons: Yellow accent for primary CTAs against the dark or light canvas. Likely border-radius tokens not extracted but expected to be moderate (4–8px given the product’s personality).
• Tags / badges: rgb(242, 242, 242) or rgb(255, 253, 217) surfaces for light-mode tags; yellow-tinted for highlighted tags.
• Inputs: 16px base font. Box model follows the standard gray-light border system.
• Navigation header: A header element with gutter tokens (--gutter-cap) managing responsive horizontal padding.

5. Layout Principles

• Gutter system: --gutter-cap (horizontal edge padding) and --gutter-y (vertical rhythm) as first-class layout tokens — responsive gutters that adjust per viewport.
• Breakpoints: 1024px and 1070px (inferred from extracted values) — a standard desktop breakpoint with a slight wide-screen offset.
• Grid: Token-based gutters suggest a fluid grid rather than fixed-column definitions.
• Whitespace: Generous at 36px, 40px scale for section spacing. Tight at 14–16px for in-component density.

6. Depth & Elevation

• Box-shadow is present as a CSS property (detected in extraction) but specific values weren’t surfaced — likely subtle 0 1px 3px rgba(0,0,0,0.1) style shadows for card lift.
• Transform: Present — animations or interactive card tilts possible. The combination of transform + opacity suggests hover micro-interactions.
• No layered elevation system — depth is binary: flat surface or single-layer card shadow.

7. Do’s and Don’ts

Do:

• Use yellow rgb(238, 230, 66) exclusively as the accent — one per page view
• Activate OpenType features on all primary text: "case", "dlig", "ss05", "ss06", "ss07"
• Store all colors as RGB triples for flexible rgba() composition
• Use --gutter-cap and --gutter-y for all edge spacing — never hardcode margins

Don’t:

• Don’t introduce a second accent color — the yellow-only system is intentional
• Don’t use the yellow background at full saturation for large areas — it’s a highlight, not a canvas
• Don’t skip OpenType features on headings — they’re load-bearing for the brand’s typographic identity
• Don’t use red outside of error/destructive contexts

8. Responsive Behavior

• --gutter-cap and --gutter-y are explicitly responsive tokens, adjusting at breakpoints to collapse page margins on mobile.
• The 1024px breakpoint triggers a layout mode change — likely from multi-column to single-column.
• Touch targets follow the 16px body default; no explicit minimum sizing tokens extracted.
• The monospace fallback stack ensures code elements render consistently across platforms.

9. Agent Prompt Guide

Quick reference:

• Ink: #0c0c0c | Canvas: #ffffff
• Yellow accent: rgb(238, 230, 66) / light yellow: rgb(255, 253, 217)
• Error: rgb(236, 66, 66)
• Gray scale: 82 / 129 / 184 / 204 / 234 / 242
• Primary font: Custom grotesque with OT features ("case", "dlig", "ss05-07")
• Mono: Monaco / Menlo / Courier stack

Prompt starters:

• “Developer brand: near-black #0c0c0c canvas, single yellow accent rgb(238,230,66), custom grotesque typeface with activated OpenType features, achromatic gray scale.”
• “Bold tech site: black and white base, yellow-only accent, type-obsessed with discretionary ligatures and stylistic alternates, gutter-token responsive layout.”

Generated by Sparkbites — extracted from live CSS analysis