Qing The Creator

Overview

Qing The Creator's design system embodies 'Technical Minimalism'—a philosophy that strips away ornament to reveal the essential mechanics of product building. The brand serves ambitious builders in Lagos and beyond who want to learn AI-driven development without gatekeeping or pretense. The aesthetic is deliberately stark: a warm cream canvas (#faf6ef) anchors the interface, while a vivid red accent (#d20b1c) punctuates every call-to-action, creating visual urgency and brand recognition. Monospace typography (Space Mono) reinforces the technical, code-first nature of the curriculum. The emotional response is one of clarity and empowerment—the UI says 'this is achievable, this is real, this is now.'

The brand voice is direct, conversational, and unapologetically Nigerian. Sentences are short and punchy. Examples: 'Build with AI.' 'I learnt AI by building products that had to work.' 'From using AI to building with it.' The vocabulary favors concrete nouns (commit, repository, landing page) over abstract marketing speak. Tone is confident without arrogance, precise without coldness. The brand personality is that of a peer mentor—someone who has shipped real products and is now teaching the process, not the theory.

Colors

The color system is built on high contrast and deliberate restraint. Primary (#d20b1c) is a bold, saturated red used exclusively for CTAs, active states, and brand moments—it commands attention without apology. On-primary is pure white (#ffffff) for maximum legibility. The surface stack is anchored in cream (#faf6ef) for warmth and approachability, with dark containers (#0d0d0d to #3a3228) used for content cards and input fields to create visual separation and depth. On-surface is near-black (#16161d), ensuring 15:1+ contrast for accessibility. Secondary (#6e5bff) is a muted purple reserved for accent highlights and future interactive states. Tertiary (#877d72) is a warm taupe used for supporting text and disabled states. The outline tokens (#b9afa3, #cfc6b9) define borders and dividers at

Typography

The type system is a three-tier hierarchy: Bricolage Grotesque for display and headlines (weights 700–800, sizes 28–107px), Inter for body and descriptive text (weight 400, sizes 16–18px), and Space Mono for labels, buttons, and code-adjacent content (weights 400–700, sizes 12–14px). Display (107px, 800 weight, -0.04em letter-spacing) is reserved for hero headlines and section titles, commanding the page with its scale and weight. Headline-lg (56px, 700 weight) and headline-md (40px, 700 weight) break up content sections. Body-lg and body-md use Inter's neutral, readable letterforms for long-form copy and descriptions. Space Mono's monospace nature signals technical content and CTA labels, reinforcing the 'code-first' brand identity. All display and headline text uses a line-height of 0.88

Layout

The layout uses a 12-column grid with a max-width of 1440px, centered with auto margins. The page rhythm alternates between full-bleed hero sections (min-height: 760px) and constrained content sections (max-width: 1440px, padding: 0 24px). Horizontal spacing uses the semantic gutter token (24px) for consistent breathing room. Vertical spacing follows the lg token (40px) for section separation and xl token (64px) for major section breaks. The hero section uses a 2-column layout on large screens (grid-cols: [1.05fr, 0.95fr]) to balance text and imagery. Cards and content blocks use gap-4 (1rem) for internal spacing and gap-px for grid dividers (creating 1px gaps between grid items). Mobile breakpoints compress padding to 16px and stack columns to single-column layouts. The container-max-widt

Elevation & Depth

Depth is achieved through layered backgrounds and subtle shadows rather than dramatic drop-shadows. Level 1 (Base): the cream surface (#faf6ef) with no shadow. Level 2 (Cards): dark containers (rgba(17, 17, 17, 0.82)) with a 1px border at rgba(245, 237, 223, 0.15) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Elevated/Modals): darker containers (rgba(17, 17, 17, 0.95)) with a 1px border at rgba(245, 237, 223, 0.2) and box-shadow: 0 24px 90px rgba(0, 0, 0, 0.26). The hero image uses a decorative border frame (absolute -inset-5, border: 1px solid rgba(210, 11, 28, 0.4), translate-x: 3,

Shapes

The shape philosophy is 'Functional Geometry'—curves are used sparingly and purposefully. Buttons use rounded-full (9999px border-radius) to signal clickability and create a soft, approachable CTA aesthetic. Input fields use a custom 13.6px radius (slightly rounded, not fully pill-shaped) to balance technical precision with usability. Cards and containers use rounded-DEFAULT (0.5rem / 8px) or rounded-md (0.75rem / 12px) for subtle definition without softness. The hero image frame uses no border-radius (sharp corners) to emphasize the portrait's importance and create visual contrast with the ro

Components

Action Elements Buttons are the primary interactive component. The primary button uses background: {colors.primary} (#d20b1c), text: {colors.on-primary} (white), rounded-full (9999px), padding: 12px 24px, height: 44px, and Space Mono 14px 700 weight. On hover, background transitions to #c20a1a (darker red) over 150ms. The secondary button uses a transparent background, 1px border at rgba(245, 237, 223, 0.4), and the same padding/height. On hover, background becomes rgba(255, 255, 255, 0.1). Both buttons use transition: background-color 150ms ease-in-out to signal interactivity without animation excess.

Containers & Surfaces Cards use background: rgba(17, 17, 17, 0.82), border: 1px solid rgba(245, 237, 223, 0.15), rounded-DEFAULT (8px), and padding: 24px. On hover, background darke

Do's and Don'ts

**Do**

• Do use primary red (#d20b1c) exclusively for CTAs, active states, and brand moments—never dilute it with secondary uses.
• Do maintain 15:1+ contrast between on-surface (#16161d) and surface (#faf6ef) for WCAG AAA compliance.
• Do apply Space Mono to all interactive labels and buttons to reinforce the technical, code-first brand identity.
• Do use the dark card backgrounds (rgba(17, 17, 17, 0.82)) with 1px cream borders to create visual separation without harsh shadows.
• Do transition all interactive states (hover, focus, active) over 150ms ease-in-out to signal responsiveness.
• Do use the lg spacing token (40px) for section separation and xl (64px) for major breaks to maintain rhythm.

**Don't**

• Don't use primary red for body text, backgrounds, or non-interactive elements—it must remain a signal for action.
• Don't apply rounded-full to cards or containers; reserve it for buttons and badges to maintain shape hierarchy.
• Don't use system fonts (system-ui, sans-serif) for display or headlines; always use Bricolage Grotesque to maintain brand distinctiveness.
• Don't add drop-shadows larger than 0 24px 90px rgba(0, 0, 0, 0.26); keep shadows soft and naturalistic.
• Don't mix opacity levels on borders; use either 0.15, 0.2, 0.3, or 0.4 to maintain a consistent visual language.
• Don't animate transitions longer than 200ms or use easing functions other than ease-in-out; keep interactions snappy and predictable.