Remixes of www.deedible.com
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Deedible
description: |
Deedible's design system embodies a modern, professional transaction platform
built for clarity and efficiency. The visual language combines clean
typography, subtle depth through color-blocking, and a teal-anchored accent
palette that conveys trust and progress. The system prioritizes legibility
over decoration, using generous whitespace and a restrained color story. Icons
and illustrations are presented in outline form with soft teal strokes,
supporting the narrative of connection and workflow. The overall mood is
approachable yet serious—enterprise-grade software designed to feel
collaborative rather than corporate.
source:
url: "https://www.deedible.com/"
pagesAnalyzed: 1
extractedAt: 2026-10-09
tokensMeasured: true
colors:
primary: "#151A24"
canvas: "#FFFFFF"
ink: "#151A24"
body: "#94A1B6"
hairline: "#D1E1ED"
accent-1: "#687495"
accent-2: "#33A3AF"
accent-3: "#242D3E"
accent-4: "#42ADB0"
typography:
display-lg:
fontFamily: Grift
fontSize: 56px
fontWeight: 700
lineHeight: 1.2
letterSpacing: 0px
display-md:
fontFamily: Grift
fontSize: 48px
fontWeight: 700
lineHeight: 1.2
letterSpacing: 0px
heading-sm:
fontFamily: "SF UI Display"
fontSize: 24px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0px
heading-xs:
fontFamily: "SF UI Display"
fontSize: 20px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0px
body-lg:
fontFamily: "SF UI Display"
fontSize: 18px
fontWeight: 400
lineHeight: 1.6
letterSpacing: 0px
body-lg-tight:
fontFamily: "SF UI Display"
fontSize: 18px
fontWeight: 400
lineHeight: 1.55
letterSpacing: 0px
body-lg-2:
fontFamily: "SF UI Display"
fontSize: 18px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-lg-3:
fontFamily: "SF UI Display"
fontSize: 18px
fontWeight: 400
lineHeight: 1.5
letterSpacing: -0.39px
body-lg-strong:
fontFamily: "SF UI Display"
fontSize: 18px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0px
body-lg-4:
fontFamily: "SF UI Display"
fontSize: 18px
fontWeight: 500
lineHeight: 1
letterSpacing: 0px
caption:
fontFamily: Urbanist
fontSize: 12px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0.96px
textTransform: uppercase
rounded:
none: 0px
xs: 16px
sm: 24px
md: 26px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 24px
xl: 28px
xxl: 32px
xxxl: 36px
section: 40px
band: 48px
borderWidths:
thin: 1px
elevationStrategy: color-blocking
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#F7F7F7"
surfaceRaised: "#EEEEEF"
text: "#151A24"
textMuted: "#94A1B6"
border: "#D1E1ED"
accent: "#151A24"
accentFg: "#FFFFFF"
focusRing: "#151A24"
elevation: shadow
dark:
bg: "#0F0F10"
surface: "#1D1D1E"
surfaceRaised: "#29292A"
text: "#F6F6F6"
textMuted: "#9E9E9F"
border: "#353536"
accent: "#6F83AB"
accentFg: "#0B0B0C"
focusRing: "#51648B"
elevation: "border+surface"
contrastFailures:
- "light: muted on bg = 2.61:1 (needs 4.5:1)"
gradients:
- context: section
kind: linear
value: "linear-gradient(90deg, rgb(51, 163, 175) 0%, rgb(83, 141, 202) 100%)"
- context: section
kind: linear
value: "linear-gradient(to top, oklab(0 0 0 / 0.9) 0%, oklab(0 0 0 / 0.45) 50%, rgba(0, 0, 0, 0) 100%)"
components:
button-outline:
typography: "{typography.body-lg-4}"
textColor: "{colors.ink}"
border: "1px solid {colors.accent-4}"
height: 48px
padding: "14px 28px 14px 28px"
rounded: 1000px
card:
typography: "{typography.body-lg-2}"
textColor: "{colors.ink}"
border: "1px solid {colors.accent-3}"
padding: "28px 28px 28px 28px"
rounded: "{rounded.sm}"
backgroundColor: "oklab(0.999994 0.0000455678 0.0000200868 / 0.02)"
card-sm:
typography: "{typography.body-lg-2}"
textColor: "{colors.ink}"
backgroundColor: "oklab(0.999994 0.0000455678 0.0000200868 / 0.95)"
badge-text:
typography: "{typography.body-lg-4}"
textColor: "{colors.canvas}"
height: 46px
padding: "14px 28px 14px 28px"
rounded: 1000px
navigation:
typography: "{typography.body-lg-2}"
textColor: "{colors.ink}"
height: 27px
footer:
typography: "{typography.body-lg-2}"
textColor: "{colors.ink}"
padding: "36px 0px 36px 0px"
backgroundColor: "rgb(15, 20, 34)"
link:
typography: "{typography.body-lg-strong}"
textColor: "{colors.ink}"
link-lg:
typography: "{typography.body-lg-2}"
textColor: "{colors.ink}"
states:
other-hover:
target: other
state: hover
backgroundColor: "rgba(66, 173, 176, 0.05)"
breakpoints:
- width: 375
containerWidth: 375
gridColumns: 3
navLinksVisible: 3
menuToggleVisible: false
headingPx: 34
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 768
gridColumns: 3
navLinksVisible: 7
menuToggleVisible: false
headingPx: 42
bodyPx: 18
sectionPaddingX: 0
- width: 1024
containerWidth: 1024
gridColumns: 5
navLinksVisible: 7
menuToggleVisible: false
headingPx: 56
bodyPx: 18
sectionPaddingX: 0
- width: 1280
containerWidth: 1280
gridColumns: 6
navLinksVisible: 7
menuToggleVisible: false
headingPx: 56
bodyPx: 18
sectionPaddingX: 0
- width: 1440
containerWidth: 1296
gridColumns: 6
navLinksVisible: 7
menuToggleVisible: false
headingPx: 56
bodyPx: 18
sectionPaddingX: 0
coverage:
statesFound: 12
gradientsFound: 2
rolesUnassigned: 4
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
Deedible's design system embodies a modern, professional transaction platform built for clarity and efficiency. The visual language combines clean typography, subtle depth through color-blocking, and a teal-anchored accent palette that conveys trust and progress. The system prioritizes legibility over decoration, using generous whitespace and a restrained color story. Icons and illustrations are presented in outline form with soft teal strokes, supporting the narrative of connection and workflow. The overall mood is approachable yet serious—enterprise-grade software designed to feel collaborative rather than corporate.
Key Characteristics:
{colors.accent-4} — #42ADB0) for interactive states and status indicators{colors.primary} — #151A24): Deep navy; used for headings, primary text, active states, and CTA fills. The dominant color for all body copy and primary interactions.{colors.accent-1} — #687495): Slate blue; decorative use without assigned interactive role.{colors.accent-2} — #33A3AF): Teal; decorative use in gradient backgrounds and section accents.{colors.accent-3} — #242D3E): Dark navy; decorative use in overlays and background tints.{colors.accent-4} — #42ADB0): Muted teal; interactive hover states, focus rings, and active badges. Primary interactive accent.{colors.canvas} — #FFFFFF): Default page background and card backgrounds.{colors.body} — #94A1B6): Secondary text color for body copy, captions, and supporting text.{colors.hairline} — #D1E1ED): Subtle border color for cards, dividers, and 1px strokes.| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Large | Grift | 56px | 700 | 1.2 | 0px | Hero headlines, page titles |
| Display Medium | Grift | 48px | 700 | 1.2 | 0px | Section headlines |
| Heading Extra Small | SF UI Display | 20px | 700 | 1.5 | 0px | Subsection headers |
| Heading Small | SF UI Display | 24px | 700 | 1.5 | 0px | Card titles, section headers |
| Body Large | SF UI Display | 18px | 400 | 1.6 | 0px | Primary body text |
| Body Large – Medium | SF UI Display | 18px | 500 | 1.5 | 0px | Link text, emphasis |
| Body Large – Tight | SF UI Display | 18px | 400 | 1.55 | 0px | Body text (alternate) |
| Body Large – Compact | SF UI Display | 18px | 500 | 1 | 0px | Dense labels, card metrics |
| Body Large – Tracked | SF UI Display | 18px | 400 | 1.5 | -0.39px | Body text with tracking |
| Caption | Urbanist | 12px | 600 | 1.5 | 0.96px | All caps labels, micro copy |
Primary (Filled)
{colors.accent-4} (#42ADB0){colors.canvas} (#FFFFFF){spacing.md} 28px (vertical/horizontal){rounded.full} (9999px){colors.accent-4} (#42ADB0), teal ringSecondary (Outline)
rgba(0, 0, 0, 0) (transparent){colors.primary} (#151A24){colors.accent-4} (#42ADB0){spacing.md} 28px (vertical/horizontal){rounded.full} (9999px)rgba(66, 173, 176, 0.05)Card – Default
oklab(0.999994 0.0000455678 0.0000200868 / 0.02) (near-white with slight opacity){colors.accent-3} (#242D3E){rounded.sm} (24px){spacing.lg} 28px{colors.primary} (#151A24)color-mix(in oklab, var(--color-teal-border) 5%, transparent)Card – Elevated Section
oklab(0.999994 0.0000455678 0.0000200868 / 0.95) (near-white, higher opacity){rounded.none} (0px){colors.primary} (#151A24)Badge – Text
{colors.accent-4} (#42ADB0){colors.canvas} (#FFFFFF){rounded.full} (9999px){spacing.md} 28pxNavigation – Default
rgba(0, 0, 0, 0) (transparent){colors.primary} (#151A24){colors.accent-4} (#42ADB0), opacity 0.9Link – Default
rgba(0, 0, 0, 0) (transparent){colors.primary} (#151A24){colors.accent-4} (#42ADB0)Footer – Default
#0F1422 (dark navy){colors.canvas} (#FFFFFF){spacing.xxxl} 36px vertical{rounded.none} (0px)Base unit: {spacing.xs} (8px). All spacing derives from multiples of this unit:
{spacing.xxs} (4px): Micro gutters, icon spacing{spacing.xs} (8px): Tight component spacing{spacing.sm} (12px): Component padding, label spacing{spacing.md} (16px): Standard padding, button internals{spacing.lg} (24px): Section spacing, card padding{spacing.xl} (28px): Large padding, button height contexts{spacing.xxl} (32px): Large section spacing{spacing.xxxl} (36px): Footer and header padding{spacing.section} (40px): Major section separation{spacing.band} (48px): Hero and full-width band spacing| Viewport | Max Width | Columns | Section Padding-X |
|---|---|---|---|
| 375px | 375px | 3 | 0px |
| 768px | 768px | 3 | 0px |
| 1024px | 1024px | 5 | 0px |
| 1280px | 1280px | 6 | 0px |
| 1440px+ | 1296px | 6 | 0px |
Full-width sections use 0px padding; content flows edge-to-edge on mobile (375px) and desktop. Container max-width is capped at 1296px on 1440px+ viewports.
The system embraces generous whitespace to reduce cognitive load. Sections are separated by {spacing.section} to {spacing.band} (40–48px) vertically. Card padding is uniform at {spacing.lg} (28px). Typography is supported by proportional line heights (1.5–1.6 for body) to avoid text cramping. Interactive elements maintain minimum 48px height for touch targets.
{rounded.none} (0px): Buttons, images, full-width sections{rounded.xs} (16px): Decorative elements, secondary components{rounded.sm} (24px): Primary cards and containers{rounded.md} (26px): Cards (alternate measurement){rounded.full} (9999px): Buttons, badges, circular elementsThe system uses color-blocking rather than shadows for depth. All interactive elements and surfaces are flat (box-shadow: none). Depth is conveyed through:
oklab() with 0.02 to 0.95 opacity){colors.hairline} or {colors.accent-3})| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow; solid background or transparent | Default cards, buttons, text |
| Overlay | Gradient linear-gradient(to top, oklab(0 0 0 / 0.9) 0%, oklab(0 0 0 / 0.45) 50%, rgba(0, 0, 0, 0) 100%) | Image overlays, scrim backgrounds |
| Gradient Section | linear-gradient(90deg, rgb(51, 163, 175) 0%, rgb(83, 141, 202) 100%) | Hero sections, accent backgrounds |
Shadow Philosophy: No drop shadows are used. Depth relies entirely on color separation, border definition, and background opacity. This maintains the clean, modern aesthetic and ensures accessibility across print and digital contexts.
z-index: 10 — Popovers and dropdown menusz-index: 50 — Modals, sticky headers, persistent overlays{colors.accent-4} (#42ADB0) for all interactive hover states and focus rings.border-radius: 9999px) consistently for CTAs and toggles.{spacing.lg} (28px) padding inside cards and container blocks.{rounded.sm} (24px) border radius; buttons sharp or pill-shaped only.{typography.caption}) for labels, metadata, and badges only.{colors.accent-1}, {colors.accent-2}, {colors.accent-3} are decorative only.{spacing.lg} (28px) on standard cards without design review.{colors.primary} (#151A24) or {colors.body} (#94A1B6).| Breakpoint | Width | Grid Columns | Navigation Links Visible | Heading Size | Body Size | Changes |
|---|---|---|---|---|---|---|
| Mobile | 375px | 3 | 3 | 34px | 16px | Single-column layout; reduced heading scale |
| Tablet | 768px | 3 | 7 | 42px | 18px | Multi-column begins; heading scales up |
| Desktop | 1024px | 5 | 7 | 56px | 18px | Five-column grid; full display typography |
| Wide | 1280px | 6 | 7 | 56px | 18px | Six-column grid; maintained display size |
| Ultra-wide | 1440px+ | 6 | 7 | 56px | 18px | Content capped at 1296px max-width |
No breakpoint hides navigation links; the menu toggle does not appear on measured viewports.
{spacing.md} (16px)No hamburger menu is employed; navigation collapses via word-wrap and link reflow.
{colors.accent-4} — #42ADB0){colors.canvas} — #FFFFFF){colors.primary} — #151A24){colors.body} — #94A1B6){colors.hairline} — #D1E1ED){colors.accent-2} — #33A3AF), Decorative 3 ({colors.accent-3} — #242D3E)border-radius: 9999px), 48px tall, with {spacing.md} internal padding. Primary buttons fill with {colors.accent-4}; secondary buttons outline with {colors.accent-4} borders.{rounded.sm} — 24px) with 1px hairline borders and {spacing.lg} padding. No shadows; depth via color opacity shifts.{spacing.md}); section separation is 40–48px ({spacing.section} to {spacing.band}).oklab() notation), border contrast, and weight shifts for depth.linear-gradient(to top, oklab(0 0 0 / 0.9) 0%, oklab(0 0 0 / 0.45) 50%, rgba(0, 0, 0, 0) 100%) for image scrim; linear-gradient(90deg, rgb(51, 163, 175) 0%, rgb(83, 141, 202) 100%) for accent section backgrounds.{colors.accent-1} (#687495), {colors.accent-2} (#33A3AF), {colors.accent-3} (#242D3E), and {colors.accent-4} (#42ADB0) have no explicit role labels; {colors.accent-4} is inferred as interactive from hover states, while others are decorative.