kindheart.design – Design System Reference

1. Visual Theme & Atmosphere

Quiet editorial calm. Suisse Int’l carries everything at small scale, projecting studio-level confidence through restraint. Nothing competes for attention; the work is the hero.

The overall mode is light, with a monospaced, code-aesthetic typographic identity. Shadows and elevation are used sparingly to separate key surfaces.

2. Color Palette & Roles

Computed Roles

• background (body): rgb(255, 255, 255)
• text (h1): rgb(82, 82, 91)
• surface (div.framer-123av1p): rgba(0, 0, 0, 0.08)

Key observations: No token layer exists. Colours emerge from context and browser defaults. Light-mode-first palette.

3. Typography Rules

h1 – Suisse Int’l Regular, 14px, weight 400, line-height 21px

h6 – Suisse Int’l Book, 15px, weight 400, line-height 15px, tracking -0.15px

body – sans-serif, 12px, weight 400

p – Suisse Int’l Mono Regular, 13px, weight 400, line-height 19.5px, tracking -0.13px, uppercase

a – Office Times Sharp Regular, 20px, weight 400, line-height 24px, tracking -0.2px

Hierarchy principle: Suisse Int’l Regular carries the primary voice. Scale and weight – not typeface changes – create hierarchy.

What is absent: No proportional serif or display face. The monospaced system is intentional – do not introduce decorative type.

4. Component Styling

Border radii: No border radii detected – corners are sharp throughout.

Interactive states:

• a[href]: tag: a.framer-text “Venice Inc.”, default: [object Object], hover: [object Object], focus: [object Object]
• a[href]: tag: a.framer-gZ5PY “Schedule an intro”, default: [object Object], hover: [object Object], focus: [object Object]
• a[href]: tag: a.framer-f10i06 “Visit our new websit”, default: [object Object], hover: [object Object], focus: [object Object]

Buttons & controls: Match the typographic register – monospaced labels, minimal padding, high-contrast borders.

5. Layout Principles

Common padding values: 12px 20px. Flex/grid gaps: 20px.

The dominant padding rhythm (12px 20px) suggests a fixed-pixel grid.

Avoid introducing grid lines, dividers, or decorative rules unless absolutely necessary. Let whitespace do the structural work.

6. Depth & Elevation

• element: "rgba(0, 0, 0, 0.15) 0px 4px 8px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px"
• element: "rgba(0, 0, 0, 0.03) 0px 4px 8px 0px, rgba(0, 0, 0, 0.08) 0px 2px 4px 0px"

Use shadows conservatively – reserve elevation for interactive feedback (dropdowns, modals), not decorative layering.

7. Do’s and Don’ts

Do:

• Respect the monospaced, code-aesthetic typographic voice – every element should speak the same typeface language.
• Use whitespace as a primary design tool. When in doubt, add space rather than elements.
• Stay within the established colour range – no additional palette colours.
• Keep interactions subtle: micro-transitions at 150-200ms maximum.

Don’t:

• Do not introduce proportional or display typefaces. The monospaced grid is the identity.
• Do not add drop shadows, gradients, or decorative textures unless they are already present in the system.
• Do not use colour to communicate hierarchy – size and weight do that work here.
• Avoid centring body text. The layout has a strong left-anchored reading rhythm.

8. Responsive Behavior

Breakpoints detected: 809, 809.98, 810, 1199.

Honour the breakpoints extracted above.

On small screens, collapse multi-column layouts to a single column without compromising the typographic scale. The type should remain readable – never below 14px rendered size.

9. Agent Prompt Guide

When generating UI components, extensions, or page sections for kindheart.design, instruct the agent as follows:

“Build in the style of kindheart.design: quiet editorial calm. Use Suisse Int’l Regular as the primary typeface. Light background, dark text. Shadows only for modal-level elevation. Minimal palette, no custom tokens. No animations – immediate state changes only. Generous whitespace, strong typographic scale. Sharp corners throughout.”

Generated by Sparkbites – extracted from live CSS analysis