Remixes of oku.club
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: Oku
description: |
Oku's design system embodies a refined, intimate aesthetic that marries
editorial sophistication with contemporary digital minimalism. The brand
creates a contemplative, library-like atmosphere through a predominantly dark,
high-contrast palette punctuated by carefully placed accents. This is a system
built for focus and discoverability — the typography choices emphasize
serif-driven headlines paired with humanist sans-serif body text, evoking the
tactile experience of printed books while maintaining modern clarity. The
overall mood is inviting and culturally aware, reflecting a community-driven
platform for book collectors and enthusiasts who value curation, connection,
and shared discovery.
source:
url: "https://oku.club"
pagesAnalyzed: 6
extractedAt: 2026-10-21
tokensMeasured: true
colors:
primary: "#E0E1E4"
link: "#0000EE"
canvas: "#131314"
on-primary: "#131314"
ink: "#C1BECB"
body: "#9E9CA6"
muted: "#46474E"
faint: "#000000"
accent-1: "#9E9EFF"
neutral-1: "#FFFFFF"
neutral-2: "#242426"
typography:
display:
fontFamily: FabricSerifWeb
fontSize: 48px
fontWeight: 400
lineHeight: 1.3
letterSpacing: -0.29px
heading-lg:
fontFamily: FabricSerifWeb
fontSize: 36px
fontWeight: 400
lineHeight: 1.3
letterSpacing: -0.22px
heading-md:
fontFamily: FabricSerifWeb
fontSize: 24px
fontWeight: 400
lineHeight: 1.3
letterSpacing: -0.7px
heading-sm:
fontFamily: Inter
fontSize: 16px
fontWeight: 400
lineHeight: 1.3
letterSpacing: 0px
heading-sm-strong:
fontFamily: Inter
fontSize: 16px
fontWeight: 500
lineHeight: 1.3
letterSpacing: 0px
heading-xs:
fontFamily: Inter
fontSize: 15px
fontWeight: 500
lineHeight: 1.8
letterSpacing: 0px
body-lg:
fontFamily: Inter
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-lg-loose:
fontFamily: Inter
fontSize: 16px
fontWeight: 400
lineHeight: 1.8
letterSpacing: 0px
body-md:
fontFamily: Inter
fontSize: 15px
fontWeight: 400
lineHeight: 1.38
letterSpacing: 0px
body-sm:
fontFamily: Inter
fontSize: 14px
fontWeight: 400
lineHeight: 1.3
letterSpacing: 0px
body-sm-strong:
fontFamily: Inter
fontSize: 14px
fontWeight: 500
lineHeight: 1.3
letterSpacing: 0px
body-xs:
fontFamily: Inter
fontSize: 13px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
button-sm:
fontFamily: Inter
fontSize: 15px
fontWeight: 500
lineHeight: 3.6
letterSpacing: 0px
button-xs:
fontFamily: Inter
fontSize: 14px
fontWeight: 500
lineHeight: 2.86
letterSpacing: 0px
caption:
fontFamily: Inter
fontSize: 12px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
rounded:
none: 0px
xs: 3px
sm: 8px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 40px
section: 48px
band: 64px
shadows:
sm: "rgba(0, 0, 0, 0.25) 0px 4px 4px -5px"
elevationStrategy: single-tier
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#F8F8FE"
surface: "#EEEEF4"
surfaceRaised: "#E7E7EC"
text: "#10101C"
textMuted: "#71717B"
border: "#D5D5DA"
accent: "#0000EE"
accentFg: "#FFFFFF"
focusRing: "#0000EE"
elevation: shadow
dark:
bg: "#131314"
surface: "#121213"
surfaceRaised: "#252526"
text: "#C1BECB"
textMuted: "#9E9CA6"
border: "#28282A"
accent: "#4141FF"
accentFg: "#FFFFFF"
focusRing: "#0000EE"
elevation: "border+surface"
components:
button-filled:
typography: "{typography.button-sm}"
textColor: "{colors.neutral-1}"
height: 54px
padding: "0px 24px 0px 24px"
boxShadow: "rgba(0, 0, 0, 0.25) 0px 4px 4px -5px"
rounded: "{rounded.sm}"
backgroundColor: "{colors.faint}"
button-filled-sm:
typography: "{typography.button-xs}"
textColor: "{colors.neutral-1}"
height: 40px
padding: "0px 24px 0px 24px"
boxShadow: "rgba(0, 0, 0, 0.25) 0px 4px 4px -5px"
rounded: "{rounded.sm}"
backgroundColor: "{colors.faint}"
button-primary:
typography: "{typography.button-xs}"
textColor: "{colors.on-primary}"
height: 40px
padding: "0px 24px 0px 24px"
boxShadow: "rgba(0, 0, 0, 0.25) 0px 4px 4px -5px"
rounded: "{rounded.sm}"
backgroundColor: "{colors.primary}"
navigation:
textColor: "{colors.faint}"
height: 40px
fontSize: 16px
fontFamily: Inter
fontWeight: 400
footer:
textColor: "rgb(105, 120, 130)"
fontSize: 14px
fontFamily: Inter
fontWeight: 400
link:
textColor: "{colors.link}"
border: "1px solid rgb(232, 232, 233)"
fontSize: 16px
fontFamily: Inter
fontWeight: 400
rounded: "{rounded.sm}"
backgroundColor: "{colors.neutral-1}"
link-2:
textColor: "{colors.link}"
fontSize: 16px
fontFamily: Inter
fontWeight: 400
states:
other-active:
target: other
state: active
transform: "translate3d(0px, 0px, 0px)"
other-hover:
target: other
state: hover
boxShadow: none
button-active:
target: button
state: active
boxShadow: "rgba(0, 0, 0, 0.1) 0px 3px 7px inset"
button-hover:
target: button
state: hover
filter: "brightness(0.95)"
transform: "scale(1.1)"
breakpoints:
- width: 375
containerWidth: 1920
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 28
bodyPx: 16
sectionPaddingX: 32
- width: 768
containerWidth: 1920
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 38
bodyPx: 16
sectionPaddingX: 32
- width: 1024
containerWidth: 1920
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 38
bodyPx: 16
sectionPaddingX: 48
- width: 1280
containerWidth: 1920
gridColumns: 0
navLinksVisible: 5
menuToggleVisible: false
headingPx: 48
bodyPx: 16
sectionPaddingX: 48
- width: 1440
containerWidth: 1920
gridColumns: 0
navLinksVisible: 5
menuToggleVisible: false
headingPx: 48
bodyPx: 16
sectionPaddingX: 48
coverage:
statesFound: 7
gradientsFound: 0
rolesUnassigned: 3
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
Oku's design system embodies a refined, intimate aesthetic that marries editorial sophistication with contemporary digital minimalism. The brand creates a contemplative, library-like atmosphere through a predominantly dark, high-contrast palette punctuated by carefully placed accents. This is a system built for focus and discoverability — the typography choices emphasize serif-driven headlines paired with humanist sans-serif body text, evoking the tactile experience of printed books while maintaining modern clarity. The overall mood is inviting and culturally aware, reflecting a community-driven platform for book collectors and enthusiasts who value curation, connection, and shared discovery.
Key Characteristics
{colors.primary} — #E0E1E4): Primary CTA fill, button states, active indicators on dark backgrounds; warm grey bridge between cool neutrals and white space.{colors.link} — #0000EE): Inline hyperlinks; classic web blue for discoverability and intuitive navigation.{colors.accent-1} — #9E9EFF): Unassigned semantic role; appears as a subtle decorative or editorial flourish in select UI contexts; treat as auxiliary, not as a primary affordance.{colors.canvas} — #131314): Default page background, primary dark surface; establishes the system's nocturnal, focused reading environment.{colors.ink} — #C1BECB): Primary heading text and high-emphasis labels; sits atop brand surfaces ({colors.primary} backgrounds).{colors.body} — #9E9CA6): Standard body copy and secondary headings; mid-tone neutral for sustained readability.{colors.muted} — #46474E): Captions, tertiary text, and secondary metadata; reduced visual prominence while maintaining contrast.{colors.faint} — #000000): Tertiary, placeholder, or disabled text; lowest hierarchy in the system.{colors.neutral-1} — #FFFFFF): Pure white; used sparingly for surface containers and book card fills.{colors.neutral-2} — #242426): Subtle dark surface variant; card and container fills on the dark canvas.Primary: FabricSerifWeb Fallback: Georgia, "Times New Roman", serif
Secondary: Inter Fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display | FabricSerifWeb | 48px | 400 | 1.3 | -0.29px | Hero headlines, brand taglines |
| Heading Large | FabricSerifWeb | 36px | 400 | 1.3 | -0.22px | Section breaks, major headings |
| Heading Medium | FabricSerifWeb | 24px | 400 | 1.3 | -0.7px | Card titles, subsection heads |
| Heading Small | Inter | 16px | 400 | 1.3 | 0px | Sub-headings, tertiary labels |
| Heading Small Strong | Inter | 16px | 500 | 1.3 | 0px | Emphasized sub-headings, action labels |
| Heading XS | Inter | 15px | 500 | 1.8 | 0px | Secondary metadata, small emphasis |
| Body Large Loose | Inter | 16px | 400 | 1.8 | 0px | Relaxed body copy for featured content |
| Body Large | Inter | 16px | 400 | 1.5 | 0px | Standard body text, links |
| Body Medium | Inter | 15px | 400 | 1.38 | 0px | Compact body, card descriptions |
| Body Small Strong | Inter | 14px | 500 | 1.3 | 0px | Emphasized captions, labels |
| Body Small | Inter | 14px | 400 | 1.3 | 0px | Standard body, UI labels |
| Body XS | Inter | 13px | 400 | 1.5 | 0px | Tertiary text, fine print |
| Button Small | Inter | 15px | 500 | 3.6 | 0px | CTA label on smaller buttons |
| Button XS | Inter | 14px | 500 | 2.86 | 0px | CTA label on compact buttons |
| Caption | Inter | 12px | 400 | 1 | 0px | Footnotes, metadata, helper text |
-0.7px on 24px, -0.29px on 48px) to maintain proportion and elegance.#000000 (pure black)#FFFFFF (white)0px 24px54px{typography.button-sm} (15px, weight 500, line-height 3.6){rounded.sm} (8px)rgba(0, 0, 0, 0.25) 0px 4px 4px -5pxfilter: brightness(0.95), transform: scale(1.1)box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 7px inset#000000#FFFFFF0px 24px40px{typography.button-xs} (14px, weight 500, line-height 2.86){rounded.sm} (8px)rgba(0, 0, 0, 0.25) 0px 4px 4px -5pxfilter: brightness(0.95), transform: scale(1.1)box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 7px inset{colors.primary} (#E0E1E4){colors.canvas} (#131314)0px 24px40px{typography.button-xs} (14px, weight 500, line-height 2.86){rounded.sm} (8px)rgba(0, 0, 0, 0.25) 0px 4px 4px -5pxfilter: brightness(0.95), transform: scale(1.1)box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 7px inset{colors.link} (#0000EE){typography.body-lg} (16px, weight 400, line-height 1.5)opacity: 1 (assume opacity shifts on hover; exact value not specified)#FFFFFF (white card surface)1px solid #E8E8E9 (hairline neutral border){rounded.sm} (8px){colors.link} (#0000EE){typography.body-lg} (16px, weight 400)#FFFFFF or {colors.neutral-2} (#242426) — white for light theme, dark for dark theme{rounded.sm} (8px) for the container; image uses {rounded.full} (9999px, circular/pill)1px solid #E8E8E9 (hairline) on white cards{colors.ink} (#C1BECB){colors.body} (#9E9CA6)#000000 (on light theme) or #FFFFFF (inferred for dark theme){typography.body-lg} (16px, weight 400, line-height normal)No form inputs or text field styles were captured in the extraction. Refer to Known Gaps.
Oku uses a consistent 4px-based spacing scale for rhythm and alignment. All margins, padding, and gaps adhere to this progression, creating a cohesive, grid-aligned visual rhythm.
{spacing.xxs} = 4px — micro spacing between tightly grouped elements{spacing.xs} = 8px — small gaps within component internals{spacing.sm} = 12px — padding inside buttons and compact containers{spacing.md} = 16px — standard padding for cards, default section gutters{spacing.lg} = 20px — larger element spacing, breathing room{spacing.xl} = 24px — section margins, major container padding{spacing.xxl} = 32px — substantial gaps between major content blocks{spacing.xxxl} = 40px — oversized section breaks{spacing.section} = 48px — inter-section vertical spacing on full-width layouts{spacing.band} = 64px — hero band height, premium whitespace{spacing.xxxl} (32px){spacing.section} (48px)Oku embraces generous, contemplative whitespace that reinforces the reading-focused product identity. Dark background ({colors.canvas} — #131314) combined with high contrast typography creates visual breathing room without excess padding. Whitespace is used strategically to isolate book cards, highlight CTAs, and guide focus toward collection and discovery flows. No dense, grid-packed layouts; instead, a curated, bookshelf-like presentation with deliberate gaps.
{rounded.none} = 0px — used sparingly; sharp edges on navigation and structural elements{rounded.xs} = 3px — minimal rounding on subtle UI borders{rounded.sm} = 8px — primary radius for buttons, cards, and container corners; soft but legible{rounded.full} = 9999px — avatar images and circular elements (user avatars, book images when displayed as circles)1px — card borders (#E8E8E9), subtle container outlines, and element separators| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Navigation, footer, background canvas, text overlays |
| Raised | rgba(0, 0, 0, 0.25) 0px 4px 4px -5px | Buttons, interactive elements; subtle lift for affordance |
| Pressed | rgba(0, 0, 0, 0.1) 0px 3px 7px inset | Button active state; shadow inverted to show depression |
Elevation Philosophy
Oku employs a single-tier shadow strategy emphasizing color-blocking over layered depth. The system has exactly one external shadow—a soft, tight shadow at buttons (4px blur, -5px offset) that provides subtle affordance without overwhelming the dark canvas. This minimalist approach prioritizes legibility and emotional restraint, ensuring depth never competes with typography or content. Active states invert to an inset shadow, giving tactile feedback through depression rather than lift.
Opacity Levels
1.0): All primary elements (text, buttons, cards):hover with opacity: 1 (compare suggests a baseline lower opacity, but exact disabled state opacity not captured)Z-index / Layering
{colors.canvas}) with light text ({colors.ink}) provides a strong baseline.{spacing.sm} or {spacing.md} for internal padding within cards and containers; avoid tighter gutters that risk cramped layouts.{rounded.sm} (8px) for interactive elements (buttons, cards, inputs) to maintain the system's soft, approachable aesthetic.{colors.primary} (#E0E1E4) for secondary CTAs and brand accents; it reads clearly on dark backgrounds and signals importance without aggression.rgba(0, 0, 0, 0.25) 0px 4px 4px -5px) only to raised, interactive elements; keep most surfaces flat.{colors.link} — #0000EE) against the dark canvas to ensure blue-on-dark readability; no other link colour is defined.{spacing.sm} (12px) or height below 40px; touch targets must remain accessible (40px minimum height aligns with mobile guidelines).{rounded.sm} (8px) unless implementing avatars or circular elements ({rounded.full}); sharp edges ({rounded.none}) are reserved for structural elements.{colors.primary} with {colors.body} or below. Brand accent only works at high contrast ratios; pair with {colors.canvas} text or #FFFFFF backgrounds.{colors.accent-1} — #9E9EFF) as a semantic signal for status, error, or emphasis; it has no assigned role and should remain auxiliary.| Viewport Width | Nav Links Visible | Heading Size | Body Size | Section Padding-X | Content Max Width | Key Changes |
|---|---|---|---|---|---|---|
| 375px | 0 (mobile) | {typography.heading-md} (24px) | {typography.body-lg} (16px) | {spacing.xxxl} (32px) | 1920px | Stacked single-column layout; nav hidden or collapsed |
| 768px | 0 (tablet) | {typography.heading-md} (24px) | {typography.body-lg} (16px) | {spacing.xxxl} (32px) | 1920px | Layout remains single-column; heading size unchanged |
| 1024px | 0 (small desktop) | {typography.heading-md} (24px) | {typography.body-lg} (16px) | {spacing.section} (48px) | 1920px | Padding increases; heading size stable |
| 1280px | 5 (desktop) | {typography.display} (48px) | {typography.body-lg} (16px) | {spacing.section} (48px) | 1920px | Navigation links become visible; heading jumps to display size |
| 1440px | 5 (wide desktop) | {typography.display} (48px) | {typography.body-lg} (16px) | {spacing.section} (48px) | 1920px | No further changes; heading and padding stable |
Navigation Collapse Point: 1024px → 1280px — Below 1024px, assume a hamburger menu or drawer navigation; at 1280px and above, horizontal nav links (5 items) are fully visible.
Mobile (375px–1024px):
{spacing.xxxl})Tablet (768px–1024px):
{spacing.section} at 1024px thresholdDesktop (1280px+):
{spacing.section} (48px){colors.primary} — #E0E1E4) on dark backgrounds; reserve for secondary buttons and highlights{colors.canvas} — #131314){colors.ink} — #C1BECB){colors.body} — #9E9CA6){colors.link} — #0000EE) — always blue, inline{colors.muted} — #46474E)#FFFFFF)#E8E8E9)#000000){colors.accent-1} — #9E9EFF)All headings 24px and above use FabricSerifWeb; body and UI use Inter. No exceptions; serif at small sizes breaks readability.
Button shadow is always rgba(0, 0, 0, 0.25) 0px 4px 4px -5px; active state inverts to rgba(0, 0, 0, 0.1) 0px 3px 7px inset. No other shadows exist in the system.
Border radius for interactive elements is {rounded.sm} (8px); avatars and circular elements use {rounded.full} (9999px); structural edges use {rounded.none} (0px).
Spacing follows the scale: 4px (xxs), 8px (xs), 12px (sm), 16px (md), 20px (lg), 24px (xl), 32px (xxl), 40px (xxxl), 48px (section), 64px (band). Use these values only; do not introduce intermediate values.
Navigation links are hidden below 1280px; horizontal nav with 5 items appears at 1280px and above. Assume mobile drawer or tabs below breakpoint.
Heading sizes scale: 48px (display) > 36px (heading-lg) > 24px (heading-md) > 16px (heading-sm). Apply negative letter-spacing on display and large sizes for elegance.
Text colour hierarchy: Ink (#C1BECB) for headings, Body (#9E9CA6) for copy, Muted (#46474E) for secondary, Faint (#000000) for tertiary. Never invert or re-assign these roles.
Card containers use a 1px hairline border (#E8E8E9) on light fills (#FFFFFF); dark fills (#242426) may omit border or use subtle outline. Border radius is always {rounded.sm} (8px).
Primary buttons are black (#000000) with white text; secondary buttons are brand accent (#E0E1E4) with dark text (#131314). Hover applies filter: brightness(0.95) and transform: scale(1.1).
Z-index layering: Dropdowns at 89, sticky elements at 199. Keep all custom overlays above 199 unless they conflict with popovers.
Form input and text field styles were not captured — no data on :focus, :disabled, placeholder styling, or border colours for inputs. Refer to platform-standard form patterns or extract from a login/signup page.
Semantic colour roles (error, success, warning) do not exist in the extracted data — the site does not expose a status or feedback colour ramp. Implement these if needed, but they are not part of the published system.
Dark mode vs. light mode: One theme was measured; the other (if present) was derived, not directly observed. Do not assume the derived theme matches production behaviour behind authentication.
Interaction states (:focus, :disabled, :visited) on links were not explicitly captured. Only button :hover and :active states are documented. Implement accessible focus rings and visited link styling as best practice.
Gradients and decorative meshes: None were detected in the extraction. All fills are solid colours or flat patterns.
Three colours have no assigned role ({colors.accent-1} — #9E9EFF, {colors.neutral-1} — #FFFFFF, {colors.neutral-2} — #242426). Accent 1 is decorative only; neutrals are generic surfaces without explicit semantic binding.
Transitions and animations (duration, easing, timing) were not extracted. Button hover applies scale(1.1) and brightness(0.95), but animation curve and duration are not specified.
Typography sizes for form labels, error messages, and validation text are not present in the extraction. Assume {typography.body-sm} (14px) or {typography.caption} (12px) for labels.
Surfaces behind authentication (logged-in user views, account settings, collection pages beyond the public preview) were not analysed. This design system covers the public-facing marketing and discovery surfaces only.
Breakpoint max-widths below mobile (< 375px) and above wide desktop (> 1440px) were not measured. Assume 375px is the mobile floor and 1920px is the max content width.
Touch feedback (ripple, ink, feedback overlay) beyond scale and opacity shifts was not captured. Button hover state uses scale and brightness; exact touch feedback mechanism is not documented.