Brand — icon, splash, notifications, share cards

Every brand surface outside the app screens, drawn with Fitted close, the chosen mark for Dabusi (다붓이).

The mark

Fitted close is the mark for Dabusi (다붓이), chosen by the owner: drawn to the one safe circle, with a small master for 32 px and down.

Fitted close

Idea: a tennis ball is two dog-bone felt pieces fitted close along the seam: 다붓이 in the ball itself. Strength: the simplest silhouette, one circle with two constant-width seam gaps (8 units, 12 on the small master); it survives one colour and 24 px. Risk: a plain ball in a circle is a category cliché and close to the stock tennis ball, so the wordmark DABUSI carries the trademark weight and the device mark is filed as a composite with the word. Pepsi’s globe and the yin-yang also split a circle with a wave; the two dog-bone arcs are what keep this a tennis ball. Peers checked: unlike Wilson’s W, Babolat, HEAD and Yonex (wordmarks and rackets) and unlike Playtomic, UTR, SwingVision and PlayByPoint (a ball, a U, a lens, a pin); the Korean 한판 club app is a word mark.

App icon 180 px on ink and on ball

Small 48, 32 and 16 px, ink and ball; 32 and 16 use the small master

Notification 24 px (small master) and 48 px, dark and light shade

Lockup with DABUSI and 다붓이, on white and on ink

Among the peers

Home screen at 60 pt, left, among the seven peer tiles on the light wallpaper

Home screen, dark the same row on the dark wallpaper

Small master, risk and trademark

24 px verdictReads at 24 px as a tennis ball with the two seam gaps; at 16 px it is a ball with two notches, so the favicon and the 16 px tile use the small master (12-unit gaps).RiskIt is near the stock tennis ball, so the DABUSI wordmark carries the trademark weight and the device mark is filed as a composite with the word. Pepsi’s globe and the yin-yang also split a circle with a wave; the dog-bone seam, two arcs bowed toward each other, is what keeps it a tennis ball.TrademarkThe seam is generic; no tennis brand’s protected mark is copied. A KIPRIS search is still needed before filing (R8).

The brief

The mark is chosen (Fitted close). This is the brief it met: its requirements as tests, and its deliverables.

Fitted close on three grounds

Three grounds ink on white, ball on ink, ink on ball; the seam is cut out

Brief

R1Legible at favicon size, on a light and a dark tab
R2A notification silhouette: one colour on alpha, no hairline gaps
R3Fits the one safe circle, centred, with no baked mask, shadow or glow
R4Square iOS layers with the same features in default, dark and tinted
R5Reads as one flat shape in one colour
R6A defined colourway on white, on ink and on ball
R7Recognisable among peer app tiles by silhouette, not colour alone
R8Ownable: the tennis element carries the 다붓이 idea (close together, fitted together), never a stock ball or racket on its own; checked against the peer set and a trademark search (KIPRIS) before adoption
R9May have two optical masters, large and small, with one silhouette
R10Sits beside “DABUSI” and “다붓이” in the horizontal, stacked and Korean lockups

The one safe circle

RuleThe mark’s enclosing circle (not its bounding box) is at most 66 / 108 = 61.1% of the layer it is drawn on. One artwork serves every touchpoint; iOS gets it at 1.113 times the scale.Android adaptive layers108dp canvas, slot 66dp, 61.1%. All layers are 108 × 108dp; the outer 18dp is reserved for masking and the inner 66 × 66dp is never clipped (Android Developers, adaptive icons).iOS icon1024² px canvas, slot 696 px, 68%. Ours: the HIG asks for square unmasked layers with primary content centred and gives no number.Notification small icon24dp = 96² px at xxxhdpi, slot 88 px, 91.7%. The optical square is 22 × 22dp, flat and entirely white (archived Android iconography); Expo asks for a “96x96 all-white png with transparency”.Favicon and apple-icon100-unit tile; slot 70 (tile), 84 (bare mark), 68 (apple-icon): 70%, 84%, 68%. Ours, for legibility at 16 px.Android 12 splash288dp canvas, slot 160dp, 55.6%. An icon without an icon background is 288 × 288dp inside a 192dp circle; expo-splash-screen draws imageWidth into a 288 × multiplier canvas.Lockupu = the wordmark cap height; the mark is 1.5u (horizontal) or 2.5u (stacked); clear space 1u on every side.GuidesThe pink dashed lines on the frames are measurement guides, never part of an asset.

Requirements, as tests

R1 Legible at 16 pxAt 16 × 16 px on a light tab strip (#DEE1E6) and a dark one (#202124) it is the same mark; nothing finer than 1 px at 16. A separate small master is allowed (R9).R2 Notification silhouetteOne colour on alpha inside 88 × 88 px of 96²; every interior gap or stroke at least 2 px (3 preferred); no gradient, no text; recognisable at 24dp (48 px at xhdpi, 72 px at xxhdpi).R3 Adaptive safe circleThe enclosing circle is at most 66dp of the 108dp layer, centred; clean edges; no baked mask, shadow or glow.R4 iOS gridSquare 1024² layers, content centred, enclosing circle at most 68% (696 px), clearly defined edges, sRGB, no text, the same features in default, dark and tinted.R5 One-colour silhouetteReads as a single flat shape in one colour (themed icon, notification, bare dark favicon, one-colour print). Colour never carries meaning the shape does not.R6 Three groundsA defined colourway on white (ink, 17.84:1; the ball alone is 1.28:1), on ink #15181A (ball 13.95:1 or white 17.84:1) and on ball #D6F04A (ink 13.95:1); at least 3:1 between mark and ground in each.R7 Among the peer tilesOn a home screen among the seven peer colour tiles at 60pt, light and dark wallpaper, it is recognisable by silhouette in greyscale, not by colour alone; no peer’s artwork is echoed.R8 OwnableThe tennis element carries the 다붓이 idea (close together, fitted together), never a stock ball or racket on its own; checked against the peer set and a trademark search (KIPRIS for Korea) before adoption.R9 Two optical mastersA large master (48 px and up) and a small one (32 px and down) may differ in detail and stroke weight; the silhouette may not.R10 With the wordmarkBeside “DABUSI” and “다붓이” in Pretendard Bold it forms the horizontal (1.5u), stacked (2.5u) and Korean lockups with 1u clear space and holds at 96 px wide.

Deliverables

D1 SVG master1000-unit square artboard, centred, outlined, keyline guides at 61.1% and 68%; colour, one-colour ink, reversed white, ball on ink.D2 iOS iconios-light.png, ios-dark.png, ios-tinted.png (1024², square, unmasked, opaque). Expo’s icon plugin reads PNGs, not Icon Composer files (the HIG prefers SVG or PDF layers there).D3 Android adaptiveandroid-foreground.png (1024² transparent, mark inside the 66dp circle), android-monochrome.png (1024², one colour on alpha), background colour #15181A.D4 Notificationnotification.png, 96² white on alpha, gaps at least 2 px, plus the 24dp vector.D5 Favicon seticon.svg (tile in light, bare mark in dark by media query), favicon.ico 32 × 32 (16 optional), apple-icon.png 180 × 180; with a manifest also icon-192, icon-512 and icon-maskable-512 (mark inside the 409 circle).D6 Splashmark-ink.png and mark-ball.png, 1024² transparent with the enclosing circle inscribed (Android only; iOS is the bare canvas).D7 LockupsHorizontal and stacked in ink, white and on-ball, with the clear-space and minimum-size sheet.D8 OG templatesThe five cards rebuilt with the real lockup (44 px high).D9 Acceptance sheetThe sheet below, rendered with the real mark; the owner marks it.

Acceptance sheet (D9): Fitted close at the test sizes; the sheet the owner marks

16 px

24 px

32 px

48 px

60 px

96 px

silhouette at 24dp (1x, 2x, 3x)

White

white on the dark shade

Ink

accent #02914C on the light shade

Ball

Also on the sheet, with the real mark: the 60pt strip among the seven peer tiles on a light and a dark wallpaper, the three Android masks, the horizontal and stacked lockups at their minimum sizes and the favicon on both tab strips.

App icon

The ink field with the mark in ball: three iOS appearances, and Android’s adaptive layers with a monochrome one.

iOS

Default the ink field, the mark in ball

Dark the same file; the field is already dark

Tinted greyscale; the system tints it (simulated)

60pt

40pt

29pt

20pt

Sizes Home, Spotlight, Settings and notification

iOS

Filesios.icon { light, dark, tinted }: three 1024² PNGs, square and unmasked (the system rounds the corners), opaque, sRGB (Display P3 allowed). SDK 57 types: the property is a string or an object of the three.LightThe ink field with the mark in ball inside the 68% keyline (696 px), centred.DarkThe same pixels: the field is already dark and the ball stays, as in the app’s dark palette.TintedA greyscale source, the mark at full white on the ink converted to grey, so the user’s tint lands on the mark. The HIG gives no pixel rule: confirm in Icon Composer or on a device. The frame simulates it with a sample tint (#8AB4F8).Layers (HIG)The system generates the appearances you do not supply. Keep features consistent across appearances; no baked highlights, shadows, bevels, blurs or glows; no text unless essential; layers with pre-defined masking hurt the specular highlights. iOS draws its own edge, which the frames do not.Expo plugin@expo/prebuild-config 8.0.17 reads PNGs: it writes the universal, dark and tinted slots, flattens light and tinted onto white (ours are opaque, so nothing changes) and keeps the dark file’s transparency. It does not read an Icon Composer .icon file.SizesHome 60 pt, Spotlight 40, Settings 29, notification 20.Configapp.json: "icon" is ios-light.png and "ios": { "icon": { "light", "dark", "tinted" } } (illustrative paths under ./assets/icon/).ReplacesOne ivory icon.png (field #F5F8F5, balls #006633) and an unset ios.icon (app.json icon): iOS derives dark and tinted itself today.ShipsNative build: icons are in the binary and the store listing, so they ship with the new mark’s first native build (the runtimeVersion policy is appVersion, 0.11.0: a new binary needs a new app version, and an OTA reaches only binaries built for its version, so no native row ships by OTA). Store listing art (the 1024 icon, the Play 512 icon, screenshots) ships with the first store release of the new mark.Not verifiedThe 68% keyline is ours: check it against Apple’s production template when the mark exists. Tinted icons are simulated. No native part has had a device pass: icons and splash need a release build.

Android

Layers background colour, foreground, monochrome

Launcher circle, squircle and rounded square

Dark wallpaper the ink tile dissolves; the mark carries it

Themed Android 13+, tinted (simulated)

Android

LayersAll layers are 108 × 108dp on a transparent canvas: the outer 18dp is reserved for masking and parallax, the launcher’s visible window is 72 × 72dp, the inner 66dp circle is never clipped. Never bake a circle, squircle or shadow into a layer.BackgroundadaptiveIcon.backgroundColor #15181A: a flat colour, so the layer is not a file.ForegroundadaptiveIcon.foregroundImage: the mark in ball on a transparent 1024² PNG inside the 66dp circle.MonochromeadaptiveIcon.monochromeImage: the same silhouette, one colour on alpha, for Android 13+ themed icons (the field then comes from the user’s wallpaper). Android 16 QPR 2 themes apps that do not provide their own. Expo’s plugin writes ic_launcher_foreground, ic_launcher_monochrome and the background colour.MasksOn a circular mask the mark fills 92% of the circle (66 of 72dp). The ink tile on the dark wallpaper is 1.07:1, so the mark carries recognition; on the light wallpaper it is 14.76:1.InterimOnly if a native build ships before the mark: adaptiveIcon.backgroundColor #F5F8F5, the ivory the iOS icon uses (the placeholder balls #006633 on it are 6.66:1). It fixes what ships and recolours nothing; #15181A replaces it when the mark lands.ReplacesadaptiveIcon.backgroundColor #006633 and the green-on-green foreground (app.json android.adaptiveIcon): 98.7% of today’s composite is #006633, and there is no monochrome layer.ShipsNative build, with the new mark. The interim line can ride any earlier native build.

Icon field: the three candidates among seven peer colour tiles (60pt, 1:1)

White

#FFFFFF

Ink

#15181A

Ball

#D6F04A

Toss

#3182F6

Kakao

#FEE500

당근

#FF6600

Naver

#03C75A

Band

#4FC962

Playtomic

#335FFF

테니스프렌즈

#CCFC00

Icon field

Ink #15181A (chosen)Mark role ball on ink 13.95:1. Nearest peer tile Playtomic, ΔE 37.0. Tile edge on the light and dark wallpaper 14.76:1 and 1.07:1. The same asset in default, dark and tinted; it echoes the hub block and the toast.White #FFFFFFMark role ink on white 17.84:1, and the ball cannot be the mark colour (1.28:1). Nearest peer Kakao, ΔE 30.3. Edge 1.21:1 and 19.09:1. Dark needs a second composition.Ball #D6F04AMark role ink on ball 13.95:1. Nearest peer 테니스프렌즈, ΔE 4.5 (Kakao 11.9, Band 21.0, Naver 23.3). Edge 1.06:1 and 14.93:1. Dark needs a second composition.Why inkThe only field where the mark can be ball-coloured at a readable contrast, the only one far from every peer tile, and the same composition in default, dark and tinted. 8 of 13 racket apps already use ball-yellow or lime as their solid accent, so a ball-coloured mark on ink uses the category colour as the accent. The cost: an ink tile dissolves on dark wallpapers.Not verifiedPeer tile colours are brand primaries used as the dominant icon colour; the real icons were not sampled. The wallpapers are assumed means (#E6EAEF, #0B1016); edge contrast is symmetric, so it does not decide the field.

Splash

The launch screen is the canvas colour on both platforms; Android 12 and later also draws the mark.

iOS, light the bare canvas, no image

iOS, dark the bare dark canvas

Android 12+, light the mark in ink on the canvas

Android 12+, dark the mark in ball on the dark canvas

Splash

BackgroundLaunch background #FFFFFF and, in dark mode, #0F1211, on both platforms (backgroundColor plus dark.backgroundColor).iOSNo image, so the launch screen is the canvas colour. Apple (HIG, launching): a launch screen is “nearly identical to the first screen”, a solid colour when the first screen is one, no text, and no logos “unless they’re a fixed part of your app’s first screen”; it should match the appearance mode. expo-splash-screen 57.0.9: withIosSplashAssets.js returns before writing an imageset when there is no image, and withIosSplashColors.js writes the dark colour when dark.backgroundColor is set.Android 12+The system draws an icon, so the mark is 160dp inside the 192dp circle on a 288dp canvas (55.6%). An icon without an icon background is 288 × 288dp and fits a 192dp circle; with an icon background it is 240 × 240dp and a 160dp circle; “everything outside the circle turns invisible”.Filesmark-ink.png for the light splash and mark-ball.png for the dark one: the mark on a transparent 1024² square with its enclosing circle inscribed, imageWidth 160. The plugin composes the PNG onto a transparent 288 × multiplier canvas and draws it at imageWidth × multiplier, centred; the two colours become colors.xml and colors-night.xml entries for windowSplashScreenBackground, and the style sets windowSplashScreenBehavior icon_preferred.ContrastInk on #FFFFFF 17.84:1 and ball on #0F1211 14.73:1. Ball on white is 1.28:1, so the light splash cannot use the ball.Config["expo-splash-screen", { "backgroundColor": "#FFFFFF", "dark": { "backgroundColor": "#0F1211" }, "android": { "image": "./assets/splash/mark-ink.png", "imageWidth": 160, "dark": { "image": "./assets/splash/mark-ball.png" } } }]AlternativeThe mark on iOS as well (a top-level image) is one config line and breaks the HIG; Korean peers commonly show a logo. The owner may prefer consistency with Android.NotesExpo Go and development builds do not show this splash: test on a release build. The app holds the splash until fonts load (apps/mobile/app/_layout.tsx), so it is on screen long enough to be seen.ReplacesThe "expo-splash-screen" plugin entry in app.json, with no props: plugin defaults, white only and no dark colour, so a dark-mode launch is white.ShipsNative build. The colours need no mark, so they ship with the next native build and fix the white launch in dark mode; the Android mark images ship with the new mark.

Notification

The small icon is white on alpha, and one accent colour has to hold on both the light and the dark shade.

Android

Small icon white on alpha, on the dark shade

다붓이지금

오늘 저녁 7시 일정

반포 한강공원 테니스장, 6명 확정

Light shade the accent on the glyph, the name and a disc

다붓이지금

오늘 저녁 7시 일정

반포 한강공원 테니스장, 6명 확정

Dark shade the same accent, readable on the dark shade

Why interior gaps are at least 2 px: a sample seam cut from the disc at 1, 2, 3 and 4 px (at 96²), drawn at 96, 72 (xxhdpi) and 48 px (xhdpi)

1 px = 0.25dp

2 px = 0.50dp

3 px = 0.75dp

4 px = 1.00dp

Small icon and accent

Small iconWhite on alpha at 96 × 96 (24dp at xxxhdpi), the mark inside the 22dp optical square (88 px), every interior gap or stroke at least 2 px at 96² (3 preferred), no gradient, no text. A 1 px gap is 0.25dp: 0.75 px at xxhdpi and 0.5 px at xhdpi, so it fades into the disc. Android design: the app icon “appears in monochrome in the status bar”.Accent#02914C, a brand-hue green (OKLCH 152.7°) at relative luminance 0.2078: 4.07:1 on #FFFFFF and 4.05:1 on #1F1F1F; a white glyph on it is 4.07:1. expo-notifications color takes one value, and the shade is white or #1F1F1F.The ceilingThe dark shade has relative luminance 0.0137, so one colour is equally far from both shades at relative luminance 0.2086, where the ratio is 4.06:1: the most a single value can give. 3:1 on both needs relative luminance 0.141 to 0.300; 3.5:1 needs 0.173 to 0.250; 4:1 needs 0.205 to 0.2125. The rule is hue-independent: if the new mark’s main hue is not green, keep the luminance and change the hue.#006633the current colour7.12:1 on #FFFFFF, 2.31:1 on #1F1F1F; a white glyph on it 7.12:1. fails on the dark shade.#006D37brand green6.48:1 on #FFFFFF, 2.55:1 on #1F1F1F; a white glyph on it 6.48:1. fails on the dark shade.#D6F04Aball1.28:1 on #FFFFFF, 12.89:1 on #1F1F1F; a white glyph on it 1.28:1. fails on the light shade.#15181Aink17.84:1 on #FFFFFF, 1.08:1 on #1F1F1F; a white glyph on it 17.84:1. fails on the dark shade.#FFFFFFwhite1.00:1 on #FFFFFF, 16.48:1 on #1F1F1F; a white glyph on it 1.00:1. fails on the light shade.#02914Cderived4.07:1 on #FFFFFF, 4.05:1 on #1F1F1F; a white glyph on it 4.07:1. passes both.Android 12+“Starting in Android 12 (API level 31), the system derives the icon color from the notification color you set in the app. If the app doesn’t set the color, it uses the system theme color. Previously, the color was gray.” Colourising the notification background applies, for most styles, only to foreground-service notifications. How widely the accent applies varies by version and maker, so it is designed to hold on both shades and is not relied on.Config["expo-notifications", { "icon": "./assets/icon/notification.png", "color": "#02914C", "defaultChannel": "default", "enableBackgroundRemoteNotifications": false }]Replacesnotification-icon.png (two overlapping discs, 3,099 opaque pixels, no seams) and color #006633, 7.12:1 on white and 2.31:1 on the dark shade (the expo-notifications plugin entry in app.json); the channel LED colour #006633 (the lightColor constant in notification.expo.ts).ShipsNative build, with the new mark: Expo says these properties “cannot be set at runtime and require building a new app binary to take effect”. The channel LED colour is JS, so any OTA can set it to the new accent.Not verifiedWhether the colour is applied to non-foreground-service notifications on Android 12 and later.

iOS

오늘 저녁 7시 일정지금

반포 한강공원 테니스장, 6명 확정

Light the app icon; there is nothing to supply

오늘 저녁 7시 일정지금

반포 한강공원 테니스장, 6명 확정

Dark the same icon on a dark banner

iOS

IconiOS shows the app icon in the banner and the notification list. There is no separate notification asset and nothing to configure, so the iOS icon above is the whole deliverable.ShipsWith the iOS icon: a native build, with the new mark.

Web

The browser bar follows the colour scheme, and the favicon is the ink tile in light and the bare mark in dark.

Browser colour

9:41

dabusi.app

Light the bar is the page canvas

9:41

dabusi.app

Dark the same, on the dark canvas

Browser colour

theme-colortheme-color #FFFFFF for light and #0F1211 for dark, by media query, so the browser bar is the page canvas (the header is white and flat, with no line at rest). MDN: theme-color takes a media attribute; Next.js viewport.themeColor accepts an array of { media, color }.In-app schemeThe app’s colour scheme can be set in the app, independent of the OS (useThemeStore), so a static media pair follows the OS only: add a small client effect that rewrites the tag from the resolved in-app mode when the two disagree.Codeexport const viewport: Viewport = { width: 'device-width', initialScale: 1, themeColor: [ { media: '(prefers-color-scheme: light)', color: '#FFFFFF' }, { media: '(prefers-color-scheme: dark)', color: '#0F1211' }, ], };Replacesviewport.themeColor '#006D37', one static value, and color-scheme: light (apps/web/app/layout.tsx and globals.css): a green bar over a white page.ShipsWeb deploy, with the S1 colour work.

Favicon and home-screen icons

다붓이, 테니스 클럽 운영

새 탭

Light tab the ink tile

다붓이, 테니스 클럽 운영

새 탭

Dark tab the bare mark, no tile

icon.svg the tile in light, the bare mark in dark

Home screen apple-icon and the PWA icon

Favicon set

Filesicon.svg, favicon.ico, apple-icon.png and, only with a manifest, icon-192.png, icon-512.png and icon-maskable-512.png. Evil Martians (How to Favicon in 2026): ico 32 × 32, one SVG that can switch with prefers-color-scheme, apple-touch-icon 180 × 180, and for a PWA 192, 512 and a maskable 512 with the mark inside the central 409 circle. Next.js 16.4 file conventions: favicon.ico in app/, icon.svg and apple-icon.png anywhere in app/, link tags generated.icon.svgThe ink tile in light; in dark the bare mark at 84%, because a dark square on a dark tab strip dissolves: ink on the #35363A active tab is 1.48:1, ball on it 9.44:1.favicon.icoA real 32 × 32 file (16 optional) replacing the route handler that answers 307 to the SVG, so a client that wants an ICO gets an ICO.apple-icon.png180 × 180, ink full-bleed, the mark at the iOS keyline (68%); iOS applies its own mask.Maskableicon-maskable-512: the mark inside the central 409 circle (79.9%); the frame draws it at the iOS keyline.Code<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <style> .tile { fill: #15181A } .mark { fill: #D6F04A } @media (prefers-color-scheme: dark) { .tile { fill: none } .mark { transform: scale(1.2); transform-origin: 50px 50px } } </style> <rect class="tile" width="100" height="100" rx="22"/> <circle class="mark" cx="50" cy="50" r="35"/> </svg>Replacesapp/icon.svg (the in-app 56 × 40 logomark, #006633, transparent, no dark query), favicon.ico/route.ts and public/favicon.png (192², ivory).ShipsWeb deploy, with the new mark: these files hold the mark, and nothing placeholder is ever deployed.

Share cards

The link cards each web link unfurls to, drawn from the code: the page’s own ink Block as a 1200 × 630 image for sessions, matches, profiles and rankings, the lockup alone for a missing target, and the root card.

DABUSI

다붓이 모여,함께 치는 테니스클럽 운영, 경기 일정, ELO 기록, 회비 관리까지

Root white canvas, ink type, the lockup and the ink block with the ball mark: /opengraph-image

강남 라켓클럽

10월 17일 (토)

DABUSI

09:00

올림픽공원 테니스장

NTRP 3.0–4.0

Session /s the ink Block: club | day, the start time in ball, venue | level

강남 라켓클럽

클럽 순위

DABUSI

42명

강남구

활동 멤버

Club ranking /lb the member count in ball, 명 beside it in white

10월 10일 (토)

올림픽공원 테니스장

DABUSI

6-4

강남 라켓클럽

복식

Match /m the score in ball; neutral, no team names

복식 ELO

김민준

DABUSI

1,482

NTRP 3.5

10월 27일 기준

Profile /p the doubles ELO in ball; the name beside it

DABUSI

Not found a missing or private target: the lockup alone, never an error image

강남 라켓클럽

10월 17일 (토)

DABUSI

09:00

올림픽공원 테니스장

NTRP 3.0–4.0

올림픽공원 테니스장

강남 라켓클럽의 일정10월 17일 (토) 09:00

앱에서 열기

Share page the Block card as the hero, one ball control

Kakao crop: the hatched bands are what a 2:1 frame trims (15 px top and bottom)

10월 10일 (토)

올림픽공원 테니스장

DABUSI

6-4

강남 라켓클럽

복식

Grammar

Frame1200 × 630 PNG for crawlers; every element inside a centred 1200 × 600 frame (15 px clear top and bottom) and 55 px from the sides, the rail of the Block at 3.43x. Kakao accepts 1:1, 2:1 and 4:3 and crops anything else around the most prominent content; 1200 × 630 is 1.905:1, and keeping the content in a 2:1 frame costs 15 px of margin and guarantees no type is cropped.The Block, drawn as an imageThe page’s own ink Block (flat-v2-auth, section web, frames sc-s, sc-m, sc-p and sc-lb) at 1200 / 350 = 3.43x, so the card and the page share one grammar: ink #15181A ground, no theme (ink and white always), padding 86 top and 55 at the sides. Zone A, 62 tall (the Tag, 82, makes it taller): the eyebrow as 45/62·600 white α0.8 (11.65:1 on the ground), a 3 px bar between facts, the lockup at the end; zone B, 79 below: the one figure 137/165·700 in ball (13.95:1), tabular, with its unit 51/75·600 white beside it; zone C, 79 below: one line of facts 51/75·500 white α0.85. A person’s name wraps and is never cut; a place that is too long crops.LockupThe mark beside DABUSI, white on the ink ground: the mark 62, the word 45 at 0.06em, 25 between (OgLockup in lib/og-card.tsx, the same geometry as the lockup of this board: a unit-100 circle with two seam gaps painted in the ground). The root card draws it 44 high (the mark 44, the word 41); the missing-target card at 137 / 103, centred.State TagBeside the lockup, 82 tall, radius 21, 45/600: neutral (#F2F2F2, #4F5851) for 취소됨 and 기록 제외, warning (#F5B301 with ink) for 검토 중. The states are drawn on flat-v2-auth (sc-s-cancel, sc-m-review, sc-m-void); a state with a sentence puts it in zone B in white at 82/110·700.Ball budgetOne ball accent per card: the figure, or on the root card the mark in the block.Root and missingRoot: a white canvas, ink type (title 72/700 on 80, subtitle 34/500 secondary), the lockup top left and one 380 × 390 ink block holding the ball mark at 60%; no domain line. It is the root grammar (canvas and block); the share cards sc-* keep the full ink Block, as ratified. Missing: the lockup alone on the ink ground.RoutesRoot /opengraph-image (opengraph-image.tsx); session /s/[sessionId], match /m/[matchId], profile /p/[userId] and club ranking /lb/[clubId] (opengraph-image.tsx each, one body in lib/og-card-lines.tsx: shareCardImage) drawing OgLinkCard, or OgNotFoundCard for a missing or private target (lib/og-card.tsx). The lines come from shareCardLines in @twomore/app, so the card, the page metadata and the alt text agree.FontsSpecified in Pretendard. satori renders the fonts it is given and the edge route loads none today (the OTFs are 1.58 MB each), so it renders its own until a subset is bundled. Sizes and hierarchy do not depend on the face.KakaoStaff (devtalk, 2025-12-12): the accepted og:image ratios are 1:1, 2:1 and 4:3, and others are auto-cropped around the most prominent content. The documentation gives only minimum sizes (200 × 200 default templates, 400 × 400 custom) and 5 MB, and the image is cached: version the URL with ?v=. The feed call declares 1200 × 630 (imageWidth and imageHeight in share.native.ts).Share pages/s, /m, /p and /lb are server pages over a client island that draws them with the kit (flat-v2-auth, section web): white canvas, the lockup slot at the top, the OG image as the hero (350 × 184, radius 16), title 24/32 bold, the open-in-app control as the kit’s primary lg Button inside a plain link to the app scheme (web-door-link.tsx). They stay Korean.ReplacesThree grammars, none S2: a flat green root card (#0F5132, 96px white wordmark), the green-gradient OgCard for match, profile and leaderboard, and the white OgSessionCard with emoji lines and old badge-palette chips (opengraph-image.tsx, lib/og-card.tsx). For the share pages: open-in-app-button.tsx (#0f5132, radius 8, 48 tall), share-page-styles.ts and --tm-bg #f8fbf9 (globals.css).ShipsWeb deploy, with S1: the grammar ships wordmark-only (type, ball Tag, ink block) and the lockup’s mark joins with the new mark. Share pages: the button and canvas colour with S1, the layout with the web phase. Kakao feed image (share.native.ts): an OTA with the OG grammar; keep 1200 × 630 with 2:1-safe content, and declare 800 × 400 only if the route serves a 2:1 image.Not verifiedThe Kakao ratio rule is a staff answer, not documentation: send a test feed after the OG change. Sample copy is invented for layout.

Check of the cards (arithmetic on the code’s constants, not a browser measurement)

Ruleevery element inside the 1200 × 600 frame (y 15 to 615) and 55 px from the sides (the rail)Rootlockup, title, subtitle and the ink block all inside y 15 to 615 and x 64 to 1136: passSessionzone A y 86 to 148, zone B y 227 to 392, zone C y 471 to 546; x 55 to 1145: passClub rankingthe same three zones: the unit sits on the figure’s baseline in zone B: passMatchthe same three zones: the score 6-4 in zone B: passProfilethe same three zones; a long name wraps and zone A grows, zone C stays 79 under B: passNot foundthe lockup centred, 137 / 103, inside the frame: passClipped textcomputed from the code’s constants (og-card.tsx, scaled 3.43x), not measured in a browserMeasured inarithmetic on the constants of apps/web/lib/og-card.tsx

Lockup

The mark beside DABUSI and 다붓이 in Pretendard Bold: horizontal, stacked and Korean, on white, ink and ball.

On white an ink wordmark and an ink mark

On ink a white wordmark and a ball mark

On ball an ink wordmark and an ink mark

Clear space (1u on every side, pink outer box) and minimum sizes at 1:1

Lockup

Wordmark“DABUSI” (all capitals, Pretendard Bold 700, tracking +6% of the cap height between letters with the font’s own kerning) and “다붓이” (tracking 0), outlined to paths: no live text in any logo file. Cap height 1448 / 2048 em (0.707 em); DABUSI is 5.301u wide (u = the cap height); the Hangul word is set at the same scale and centred on the cap-height band. The wordmark is DABUSI; the name in text is Dabusi.ColourText ink #0D100E on white, white on ink, ink on ball. The mark carries the colourway of its ground: ink on white, ball on ink, ink on ball.HorizontalThe mark 1.5u, a 0.6u gap, the wordmark vertically centred on the mark: 740.1 by 150 units where the cap height is 100.StackedThe mark 2.5u, a 0.7u gap, the wordmark centred below: 530.1 by 422 units.Clear space1u on every side (u = the wordmark cap height).Minimum sizesHorizontal 96 px wide (96 × 19.5), stacked 72 px wide (72 × 57.3), the mark alone 16 px.Web sidebar (1200 and up)apps/web/components/app-nav.tsx: horizontal, 28 px high, ink wordmark on white (the sidebar has no brand today).Web rail (600 to 1199)app-nav.tsx: the mark only, 32 px; the wordmark is dropped, never squeezed.OG cardsapps/web/lib/og-card.tsx (all five): horizontal, 44 px high, top left; replaces the green wordmark footer and the root card’s 96px wordmark.Share pagesapps/web/app/{s,m,p,lb}/page.tsx: horizontal, 28 px high, top left (the pages carry no brand today), with the web phase.Login screenpackages/app/src/presentation/screens/auth/login-screen.tsx: stacked, 180 px wide; replaces <Logo width={180}>.Store, press, emailOutside the repo: either lockup, from the same SVG masters (D7).Replacespackages/ui/src/logo.tsx: a Georgia wordmark with ball glyphs for the o’s (#006633), used once on the login screen and the only serif in the product.ShipsLogin screen: an OTA, with the new mark. Web sidebar and rail, OG cards and share pages: web deploy, with the new mark.

System bars

The bars take the canvas colour; only their content flips with the theme.

Light

9:41

경기

status bar 44header 56, no line at rest

홈

클럽

경기

기록

프로필

tab bar 56 + inset 34

iOS dark content on the white header

9:41

경기

status bar 24header 56, no line at rest

홈

클럽

경기

기록

프로필

tab bar 56 + inset 24

Android, gesture the pill follows the app theme

9:41

경기

status bar 24header 56, no line at rest

홈

클럽

경기

기록

프로필

nav bar 48, scrim kept

Android, 3-button the system scrim is kept

Dark

9:41

경기

status bar 44header 56, no line at rest

홈

클럽

경기

기록

프로필

tab bar 56 + inset 34

iOS light content on the dark canvas

9:41

경기

status bar 24header 56, no line at rest

홈

클럽

경기

기록

프로필

tab bar 56 + inset 24

Android, gesture a light pill and light status content

System bars

Status bar contentDark over the header surface in light, light in dark: SystemBars style “dark” or “light” after the change (StatusBar bound to the app theme today).Status bar fillNone: the header’s own #FFFFFF runs under it, edge to edge, and #0F1211 in dark. Expo marks androidStatusBar.backgroundColor and translucent deprecated, with “no effect” under edge-to-edge.Header56 plus the top inset, no line at rest, an edge hairline once content scrolls under it (white α0.14 in dark).Tab bar56 plus the bottom inset on the canvas, an edge hairline only while content lies below it; the iOS home indicator inset is 34.Gesture navigation barFully transparent (the Android 15 default); the pill is dark on the white tab bar and light on #0F1211. react-native-edge-to-edge 1.8.1: the gesture bar is transparent and the button bar semi-opaque.3-button navigation barKeep the system’s semi-opaque scrim (contrast enforced). enforceNavigationBarContrast stays true: forcing it false makes the app own the bar style on every screen.Not set todayNo SystemBars and no navigation-bar style anywhere (grep of apps/mobile and packages), so the gesture pill follows the OS scheme, not the in-app theme: a dark OS with a light in-app theme puts a light pill on the white tab bar.Codeimport { SystemBars } from 'react-native-edge-to-edge'; // in place of the StatusBar element <SystemBars style={tamaguiThemeName.startsWith('dark_') ? 'light' : 'dark'} />;Replaces<StatusBar style=… /> from expo-status-bar (apps/mobile/app/_layout.tsx). The library says to replace the built-in StatusBar, expo-status-bar and expo-navigation-bar with SystemBars under edge-to-edge.ShipsAn OTA: JS only, the native module is already in the binary. Confirm on the emulator rung first.

Name candidates

Chosen on 2026-10-14: Dabusi (다붓이), close together. The deep checks are clear; a 변리사 files at KIPO next. The runners-up stay for reference.

Dabusi: 테니스 클럽 운영dabusi.app@dabusiapp

The pairing: store line, web address and handle The name stays the players’ word; the descriptor names the job and the sport. A new sport changes the descriptor, never the name.

Dabusi다붓이

Chosen: Dabusi Close together (다붓이: 붙어 있는 정도가 매우 가깝게). Clear in KR, US, EU in seven classes; file at KIPO soon.

Tadok타독

Runner-up: Tadok 다독 with the Korean soft t: the pat of encouragement. Clear in Korea; TADOKE in class 9 abroad.

Obusi오붓이

Runner-up: Obusi Cosy and close, as in 오붓한 모임. A Latin Obusi is pending in class 35 retail.

TwoMore투마

Until the switch: TwoMore Today’s name in the app, until the switch to Dabusi.

Spec (grounding, anatomy)

Every brand surface outside the app screens (app icon, splash, notification, web, share cards, lockup, system bars), composed from the shared flat v2 kit around the Fitted close mark for Dabusi (다붓이).

route ·

apps/mobile/app.json, apps/mobile/assets, apps/web/app/layout.tsx, apps/web/app/opengraph-image.tsx, apps/web/lib/og-card.tsx, apps/web/app/icon.svg, packages/app/src/config/kakao-share-templates.json

grounded in 14 source file(s)

apps/mobile/app.jsonapps/mobile/assets/icon.pngapps/web/app/layout.tsxapps/web/app/opengraph-image.tsxapps/web/app/icon.svgpackages/app/src/config/kakao-share-templates.jsonapps/mobile/assets/adaptive-icon.pngapps/mobile/assets/notification-icon.pngapps/web/lib/og-card.tsxapps/web/app/favicon.ico/route.tsapps/web/components/web-door-link.tsxpackages/ui/src/logo.tsxpackages/app/src/adapters/expo/notification.expo.tspackages/app/src/adapters/share/share.native.ts