Inocoms

Overview

Inocoms is a Seoul-headquartered IT enterprise delivering end-to-end digital transformation across web, mobile, AI, and cloud infrastructure. The design system embodies 'Tech-Forward Minimalism'—a bold aesthetic that pairs absolute black (#000000) canvases with vivid neon-lime accents (#BBFF00), creating visceral energy and precision. The brand personality is direct, confident, and solution-oriented: we speak in concrete deliverables, not abstractions. The UI conveys technical sophistication through stark contrast and purposeful typography, evoking the clarity of code and the velocity of innovation. Example sentence in brand voice: 'We architect scalable solutions from day one—your infrastructure grows with your ambition.'

Colors

The color system is built on extreme contrast: a pure black foundation (#000000) with a luminous neon-lime primary accent (#BBFF00) that commands attention on every interactive element. Primary (#BBFF00) is deployed on all call-to-action buttons, active states, and brand-critical highlights—it is the visual signature of user agency. Secondary grays (#999999, #666666, #505050) provide hierarchy and support without competing; they appear in disabled states, secondary text, and dividers. The surface stack ranges from near-black (#050505 for surface-container-lowest) to charcoal (#404040 for surface-container-highest), enabling subtle depth without breaking the dark aesthetic. On-surface text is pure white (#ffffff) for maximum legibility; on-surface-variant (#cccccc) is reserved for tertiary

Typography

The type system layers three distinct families to create visual rhythm and information hierarchy. Anton (display, headline-lg) is the brand's voice—bold, geometric, all-caps for maximum impact on hero sections and key messaging. Economica (headline-md, title-lg, label-md, label-sm) bridges the gap with technical precision and tight letter-spacing (0.05em–0.08em), reinforcing the engineering ethos. Pretendard (body-lg, body-md) is the workhorse—clean, legible, and optimized for Korean and Latin text at 16–18px. Display text (84px, Anton, -0.04em letter-spacing) is reserved for hero statements; headline-lg (48px, Anton) anchors section introductions. Body text defaults to 16px with 24px line-height for comfortable reading on dark backgrounds. Labels use Economica at 12–14px with elevated let

Layout

The layout system uses a 12-column grid with a max-width of 1199px, centered on desktop and edge-to-edge on mobile. The gutter is 24px (md spacing), creating breathing room between columns while maintaining density. Section separation uses lg spacing (40px) vertically to establish clear rhythm; card-to-card spacing within a section uses md spacing (24px). The container max-width of 1199px accommodates Bootstrap 3 legacy constraints while allowing full-bleed video and hero sections to extend beyond the grid. White-space is intentional: the dark background means negative space reads as active, not empty. Padding inside cards and input fields follows the sm/md scale (12px/24px), with inputs receiving 12px vertical padding to maintain 44px minimum touch targets. Mobile breakpoints collapse to

Elevation & Depth

Depth is conveyed through discrete shadow layers and surface color shifts, never through blur or glassmorphism. Level 1 (Base): pure black surface (#000000) with no shadow. Level 2 (Standard Card): surface-container (#1a1a1a) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating subtle separation. Level 3 (Elevated/Modal): surface-container-high (#2d2d2d) with box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2), establishing clear hierarchy. Hover states on cards transition to surface-container-highest (#404040) with lg shadow (0 5px 10px rgba(0, 0, 0, 0.2)) over 300ms, signaling interactivity. Prima

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are minimal and purposeful, never organic. Buttons use md radius (10px), creating a subtle softness that prevents harsh edges without appearing playful. Cards and containers use lg radius (16px) for slightly more breathing room. Input fields use DEFAULT radius (6px), maintaining technical precision. The full radius (9999px) is reserved for badges and pill-shaped elements. Border-radius is never applied to the body or full-width sections; those remain sharp (0px). This hierarchy—sharp containers, slightly rounded cards, and pill-shap

Components

Action Elements Buttons are the primary interaction primitive. button-primary uses #BBFF00 background with black text (16px Economica, 700 weight), 12px vertical / 32px horizontal padding, and 10px border-radius. On hover (200ms transition), the background shifts to #99cc00 with a 0 3px 8px rgba(187, 255, 0, 0.3) glow, signaling activation. Active state uses #88cc00. button-secondary is transparent with a 2px solid #666666 border, white text, and identical padding; on hover, the background becomes #2d2d2d and the border shifts to white. Links use #BBFF00 text with no underline by default; on hover, they shift to #99cc00 and gain an underline over 200ms.

Containers & Surfaces Cards are the primary container. They use #1a1a1a background, 1px solid #505050 border, 24px padding, and 1

Do's and Don'ts

**Do**

• Do use #BBFF00 as the sole accent color—it is the brand's signature and must appear on every primary CTA, active state, and focus indicator.
• Do maintain pure black (#000000) as the dominant background; it is not a neutral—it is the canvas that makes the neon sing.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) to white text overlaid on video or complex imagery to ensure 4.5:1 contrast.
• Do use Anton for display and headline-lg to establish brand voice; Economica for labels and technical copy; Pretendard for body text.
• Do transition all interactive elements over 200–300ms using cubic-bezier(0.4, 0, 0.2, 1) to convey responsiveness without feeling sluggish.

**Don't**

• Don't use gradients or blur effects (backdrop-filter, box-shadow blur > 10px)—the system is built on discrete, sharp layers.
• Don't apply #BBFF00 to non-interactive elements; reserve it exclusively for buttons, links, active states, and focus indicators.
• Don't exceed 10px border-radius on any element; the brand is geometric, not organic.
• Don't use system fonts or generic sans-serif; always load Anton, Economica, and Pretendard from Google Fonts.
• Don't place white text directly on black without a shadow; minimum text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) for legibility.