← Project Index UI Kit The full identity and component system — logo lockups and usage law, app icon, colour ramps with measured contrast, type scale, every foundation token, and 18 sections of components. The brand source of truth.
{{ cloudLayer }}
{{ appCaps }} · REALISTIC-CARTOON UI BRAND KIT

Components to build with

Twenty-six sections. Sections 01–08 are the foundations — the logo system, its construction and misuse, the app icon, the colour ramps with measured contrast, the type scale and every token. Sections 09–26 are the components built on them.
1B2B4B
BFD9F2
F7FBFF
F2B84B
5B6F8E
Source Serif 4 display
Instrument Sans UI
01

Logo system

Six approved lockups. Every one is built from the same three-puff mark and the Source Serif wordmark — nothing else is a Clearsky logo.
APPROVED LOCKUPS
Clearsky
L1 · Horizontal · primaryThe default. Site nav, app header, email, decks, documents.
Clearsky
L2 · StackedSquare or centred space — splash, poster, merch, avatar.
L3 · Mark onlyOnly where Clearsky is already named. Favicon, tab bar, watch.
Clearsky
L4 · Wordmark onlyTight horizontal bands and footers where the mark would go under 24px.
ClearskyShow up for what matters
L5 · Signature · with sloganCovers, first slides, App Store art. Never inside a UI.
ClearskyPARTNER
L6 · Co-brandHairline divider at 1px, partner mark optically matched in height.
SIZE BEHAVIOUR — THE LOCKUP SIMPLIFIES AS IT SHRINKS
Clearsky≥ 200px wide — L1 with slogan permitted Clearsky120–200px — L1, no slogan < 120px — L3 mark only ≤ 32px — mark in a navy tile
02

Construction & clear space

One unit, x, is the diameter of the tallest puff. Every measurement in the identity is a multiple of it.
clear space = 1x Clearsky
Clear space. No type, rule, edge or image may enter 1x on any side. In dense UI the minimum falls to 0.5x, never lower.
puff A r = 1.25xpuff B r = 1.00xpuff C r = 0.85xbaseline offset = 0.25x
Geometry. Three overlapping circles on a 20×14 field. The tall puff sits left of centre; the sun always rises from the right. Never redraw by eye.
Clearsky✗ baseline aligned Clearsky✓ optically centred
Alignment. The mark centres on the wordmark’s x-height, not its baseline. Gap between mark and wordmark is 0.3x.
MINIMUM SIZES — BELOW THESE THE MARK LOSES ITS THIRD PUFF
Digital · L1 lockup96px widenav bars, email headers
Digital · L3 mark24px widefavicon, tab bar, watch
Print · L1 lockup24mm widestationery, decks
Print · L3 mark7mm widespine, foil, embossing
Embroidery32mm widetwo-puff simplification allowed
Etch or single colour12mm widesolid navy or white only
03

Backgrounds & monochrome

Navy on light, white on everything dark. Amber is never the logo colour — it is the action colour.
APPROVED BACKGROUNDS
Clearsky
B1 · WhiteNavy lockup. The default pairing.
Clearsky
B2 · Sky tintNavy holds to Sky 300. Below that, knock out.
Clearsky
B3 · NavyWhite knockout only. Never navy-on-navy embossing.
Clearsky
B4 · Sky gradientWhite knockout with a 0 2px 0 rgba(27,43,75,0.25) shadow.
Clearsky
B5 · AmberAmber ink #4A3410. Merch and stickers only.
Clearsky
B6 · PhotographyWhite on a scrim at 40–50% — never bare on an image.
Clearsky
B7 · Single colourNavy 900 for one-colour print, stamps and fax-grade output.
Clearsky
B8 · Greyscale20% black minimum separation between mark and ground.
04

Misuse

Eight failures we have already seen. If a proposed use resembles any of these, it is wrong.
✕ Clearsky
Never skew, rotate, arch or distort the lockup.
✕ Clearsky
Never set the wordmark in Instrument Sans or any other face.
✕ Clearsky
Never recolour the puffs or split the lockup into two colours.
✕ Clearsky
No gradients, bevels, glows or drop shadows on the wordmark.
✕ Clearsky
Never tighten the mark-to-wordmark gap below 0.3x.
✕ Clearsky
Never mirror the lockup or move the mark to the right.
✕ Clearsky
Never use a mid-ramp tint that drops the logo below 3:1 on its ground.
✕ ClearskyAI
Never append a product word, tagline or badge inside the lockup.
05

App icon, favicon & avatars

One icon: the mark, knocked out white, centred on the golden-hour sky. Never the wordmark, never a screenshot.
Mark at 50% of the canvas width, optically centred. Dashed line is the 10% safe area.
EXPORT SIZES · PNG, NO ALPHA, sRGB
1024²App Store 180²iPhone @3x 120²iPhone @2x 87²Settings @3x 80²Spotlight @2x 60²Notification @3x 58²Settings @2x 40²Notification @2x 29²Settings @1x
OTHER MARKS
favicon 32 favicon 16 social avatar notification watch ClearskyOG badge
NEVER Rounded corners drawn by hand · the wordmark inside the icon · transparency in an app icon · the daydreamer character as an icon · a screenshot as the icon.
06

Colour system

Six ramps, ten steps each. Semantic tokens are the only names allowed in code — never a raw hex.
RAMPS
Navy structure, ink, primary action
50rgba(0,0,0,0.68)55682EEF3F9100rgba(0,0,0,0.68)56093D8E6F4200rgba(0,0,0,0.68)56505B4CBE4300rgba(0,0,0,0.68)569178FAFD5400rgba(0,0,0,0.68)573296B90C0500rgba(255,255,255,0.86)577414A6B9C600rgba(255,255,255,0.86)5815633507C700rgba(255,255,255,0.86)5857127406B800rgba(255,255,255,0.86)589861B2B4B900rgba(255,255,255,0.86)594010F1A30
Sky surface, atmosphere, calm
50rgba(0,0,0,0.68)60304F7FBFE100rgba(0,0,0,0.68)60715EDF5FC200rgba(0,0,0,0.68)61127DCEDF9300rgba(0,0,0,0.68)61539C9DFF4400rgba(0,0,0,0.68)61951BAD3EA500rgba(0,0,0,0.68)62363A8C6E5600rgba(0,0,0,0.68)627757FA5CE700rgba(0,0,0,0.68)631875F81AE800rgba(255,255,255,0.86)6359940608F900rgba(255,255,255,0.86)640142A4066
Amber the one warm action, promises
50rgba(0,0,0,0.68)64923FFFBF2100rgba(0,0,0,0.68)65334FDF6EC200rgba(0,0,0,0.68)65746FBEBCF300rgba(0,0,0,0.68)66158F8DEAE400rgba(0,0,0,0.68)66570FFDD9A500rgba(0,0,0,0.68)66982F2B84B600rgba(0,0,0,0.68)67394DFA436700rgba(0,0,0,0.68)67806C08A28800rgba(255,255,255,0.86)682188A6420900rgba(255,255,255,0.86)686334A3410
Green kept, confirmed, protected
50rgba(0,0,0,0.68)69539F7FCF6100rgba(0,0,0,0.68)69950EFF7EE200rgba(0,0,0,0.68)70362DCEFD8300rgba(0,0,0,0.68)70774CBE0C7400rgba(0,0,0,0.68)71186A9C6A2500rgba(0,0,0,0.68)715987FA878600rgba(0,0,0,0.68)720105E8A57700rgba(255,255,255,0.86)724223F6339800rgba(255,255,255,0.86)728372E4A2A900rgba(255,255,255,0.86)732521C2E19
Clay urgency and recovery, never alarm
50rgba(0,0,0,0.68)74164FDF8F5100rgba(0,0,0,0.68)74575FDF5F1200rgba(0,0,0,0.68)74987F9E4DA300rgba(0,0,0,0.68)75399F6D9CE400rgba(0,0,0,0.68)75811EED0C6500rgba(0,0,0,0.68)76223E0A88E600rgba(0,0,0,0.68)76635C96F4A700rgba(255,255,255,0.86)77047C0492B800rgba(255,255,255,0.86)77462A04E2C900rgba(255,255,255,0.86)778775E2A18
Ink text and hairlines
50rgba(0,0,0,0.68)78773FDFEFF100rgba(0,0,0,0.68)79184F7FBFE200rgba(0,0,0,0.68)79596EEF4FA300rgba(0,0,0,0.68)80008E9F1F9400rgba(0,0,0,0.68)80420E0EBF7500rgba(0,0,0,0.68)80832C6D4E4600rgba(0,0,0,0.68)812449DAFC6700rgba(255,255,255,0.86)816565B6F8E800rgba(255,255,255,0.86)820714C5F7D900rgba(255,255,255,0.86)8248622314F
SEMANTIC TOKENS
--inkBody text --ink-2Secondary text, WHY NOW --ink-3Muted, eyebrows, meta --ink-strongHeadings, primary action --surfaceCards, sheets, inputs --surface-2Nested surface --pageApp page ground --lineHairline --line-2Card border --line-3Control border --actionThe one warm action --action-inkInk on action --action-quietSecondary action fill --linkLinks --keptKept, confirmed, protected --attentionDue today, needs a new plan --focusFocus ring
CONTRAST · MEASURED, NOT ESTIMATED
PairingHexRatioGradeUse for
AaBody ink on white #22314F / #FDFEFF 12.84 AAA Any size
AaMuted on white #5B6F8E / #FDFEFF 5.06 AA Body and small text
AaSecondary ink on white #4C5F7D / #FDFEFF 6.42 AA Body and small text
AaRetired grey on white #8FA2BD / #FDFEFF 2.58 FAIL Do not use for text
AaInk on page #1B2B4B / #F3F8FD 13.16 AAA Any size
AaMuted on page #5B6F8E / #F3F8FD 4.78 AA Body and small text
AaSecondary on amber card #4C5F7D / #FBEBCF 5.52 AA Body and small text
AaAmber label on amber tint #8A6420 / #FDF6EC 4.99 AA Body and small text
AaButton ink on amber #4A3410 / #F2B84B 6.56 AA Body and small text
AaWhite on navy #F8FBFF / #1B2B4B 13.55 AAA Any size
AaSub on navy #9DB4D8 / #1B2B4B 6.66 AA Body and small text
AaAmber link on navy #FFDD9A / #1B2B4B 10.75 AAA Any size
AaKept green on tint #3F6339 / #EFF7EE 6.29 AA Body and small text
AaClay on tint #C0492B / #FDF5F1 4.61 AA Body and small text
AaLink on white #27406B / #FDFEFF 10.24 AAA Any size
RETIRED #8FA2BD measures 2.58:1 on white and fails at every text size. It survives only as a hairline or an icon fill — never as type. Use --ink-3 #5B6F8E instead.
07

Type scale

Three faces, eighteen tokens. Anton shouts, Source Serif feels, Instrument Sans works — never swap their jobs.
TokenFaceSizeLineWtTrackUsed for
display-xl Anton clamp(52,8.4vw,122) 0.97 400 +0.015em Marketing hero headline, uppercase
display-l Anton clamp(40,5.6vw,84) 1.00 400 +0.015em Marketing section headline
display-m Anton clamp(34,4.4vw,62) 1.02 400 +0.015em Story beat, page title
display-s Anton 30 / 38 0.98 400 +0.015em App splash headline
editorial-l Source Serif 4 25 / 42 1.10 600 0 Doc title, manifesto pull quote
editorial-m Source Serif 4 21 / 24 1.25 600 0 Primary decision card title
editorial-s Source Serif 4 18 / 20 1.35 600 0 Promise title, moment name
title-l Instrument Sans 25 / 26 1.10 700 0 Screen title (Today, Promises)
title-m Instrument Sans 17 1.25 700 0 Nav bar title, sheet title
title-s Instrument Sans 15.5 1.30 700 0 Card heading, list group
body-l Instrument Sans 15 1.60 400 0 Marketing body, long form
body-m Instrument Sans 13.5 1.55 400 0 App body, message text
body-s Instrument Sans 12.5 1.50 400 0 Supporting detail, WHY NOW
label-m Instrument Sans 12 1.40 600 0 Inline action, row meta
label-s Instrument Sans 11.5 1.45 600 0 Timestamp, person + due
eyebrow Instrument Sans 10.5 1.20 700 +0.16em Section label, uppercase
eyebrow-xs Instrument Sans 10 1.20 700 +0.20em Card kicker, uppercase
mono ui-monospace 11 1.40 400 0 Times, hex, tokens, IDs
Minimum sizes
App body never below 12.5px · marketing body never below 15px · slide text never below 24px · print never below 12pt.
Dynamic Type
Every app token scales with the system setting. Layouts must survive 200% without truncation or overlap.
Measure
Long-form copy caps at 68 characters. App body caps at 42. Never justify; never hyphenate.
Numerals
Tabular figures for times, counts and prices. Proportional everywhere else.
08

Foundation tokens

Spacing, radius, elevation, motion, layering and breakpoints. Nothing in the product may use a value absent from this page.
SPACING · 4pt BASE
4pxhairline gap7pxicon to label9pxstacked text11pxrow internals14pxcard internals16pxpage gutter (app)22pxsection internals36pxpage gutter (desk)62pxmarketing band
RADIUS
11pxchips, small tiles13pxsecondary buttons, tiles14pxinputs, list rows16pxlist cards18pxcontent cards20pxdecision card22pxtriage card26pxkit sections38pxapp icon999pxpills, avatars, toggles
ELEVATION
e0none — flat on pagee10 1px 3px rgba(27,43,75,0.16)e20 10px 20px rgba(199,141,32,0.30) — actione30 12px 26px rgba(27,43,75,0.28)e40 16px 32px rgba(27,43,75,0.12)e50 24px 48px rgba(27,43,75,0.10)e60 34px 44px rgba(12,22,42,0.50) — art
MOTION
instant0ms — state flips, selectionfast120ms ease-out — pressbase180ms ease — toggle knobenter250ms ease — sheets, cardscalm280ms ease — card changeambient24–56s linear — splash loopsbloom9–14s ease-in-out — breathingreduceall of the above → 0ms or paused
LAYERING
z-0page and patternz-1contentz-5sticky headerz-20tab barz-25bottom sheetz-30status barz-40home indicatorz-50toast
BREAKPOINTS
≤ 430pxiPhone — the primary target431–767pxlarge phone, small tablet768–1023pxtablet — marketing two-up1024–1279pxlaptop — marketing full≥ 1280pxdesk — 1160px content cap
Hit targets
44×44px minimum for every tappable element. Where the visual control is smaller, wrap it in a transparent 44px target and keep the visual centred.
Focus
2px ring in --focus at 2px offset, on every interactive element, never removed. Focus must be visible on both light and navy grounds.
Iconography
24×24 grid, 1.6px stroke, round caps and joins, 2px inner padding. Clouds are the only filled shapes.
Naming
Tokens are kebab-case and semantic: --ink-2, --action-quiet. Components are PascalCase. States use the product vocabulary, never synonyms.
09

Buttons

Pill geometry throughout. Night navy is the workhorse; sunlight is reserved for the one CTA that matters on a page.
VARIANTS
1a · Primary
1b · Secondary
1c · Sunlit CTA
Get updates 1d · Quiet link
PRIMARY STATES
Default
1e
Hover
1f
Pressed
1g
Focus
1h
Disabled
1i
Making room…
1j · Loading
SIZES
Large / hero
1k
Medium / default
1l
Small / inline
1m
10

Cards

Character renders drop straight into the framed slots — the kit ships with placeholders, not stand-in art.
“Every unanswered email, cleared before the elevator hit the lobby.”
THE CORPORATE WORKER
2a · Character spotlight
Private by design
Drafts are prepared on your device and leave it only when you hit send. Your messages train your {{ appName }} — not an ad model.
Learn more
2b · Feature
SEP 3, 2026
The sky clears, the person remains
Read update
2c · News / scene
11

Chips & badges

Clouds are categories, not clutter — chips name what a moment needs: a reply, a plan, a follow-up, protected time.
Reply Plan Follow up Protect time
Reply Plan Follow up Protect time
3a · Category chips — hover for edge light; navy = selected
Confirmed Awaiting reply Rescheduled Focus time
3b · Status badges
3 NEW 12 unread
3c · Counters & notifications
12

Inputs & forms

White fields on sky. Focus is a ring of daylight; errors speak in clay, never alarm red.
EMAIL
you@clearsky.app
4a · Default
EMAIL
mika@
4b · Focus
EMAIL
mika@clear
That address looks incomplete.
4c · Error
EMAIL
you@clearsky.app
4d · Disabled
NOTE
What should tomorrow feel like?
4e · Textarea
SCHEDULE
Morning person
4f · Select
SEARCH
Search your sky…
4g · Search
Weekly digest Morning summary Gentle Direct Quiet hours Sun's out
4h · Selection controls — checkbox, radio, toggle
13

Navigation

Quiet links, a navy anchor, one sunlit action per surface.
{{ appName }} Product Characters Pricing Journal Get started
5a · Top bar
Overview Characters Scenes Settings
5b · Tabs
Home/ Characters/ The Corporate Worker
5c · Breadcrumbs
‹ 1 2 3 … 8 ›
5d · Pagination
Day Week Month 5e · Segmented
14

Avatars & frames

Sky-to-sun ring frames the character renders. Drop art into the slots — it stays.
112
76
48
6a · Portrait frames
CW NO GD +4
6b · Cast group
CW The Corporate Worker Clears inboxes before coffee
6c · Identity cell
15

Feedback

Weather-report tone — states inform, never alarm.
Sky updateTomorrow's plan is drafted. Review when you like.
All clear12 threads handled while you were out.
Clouding upThree replies are waiting on you.
Storm flagThat send didn't go through. We saved the draft.
7a · Banners — info / success / warning / error
Morning cleared. 6 emails snoozed to 2 PM. Undo
7b · Toast
16

Overlays

Dim the sky, never black it out — the world stays visible behind every dialog.
Clear your Saturday?
We'll move three low-stakes threads to Monday morning and hold the afternoon open for the park.
Not now Clear it
8a · Modal
Protect time Holds 2–4 PM every weekday
8b · Tooltip
17

Progress & loading

Progress reads like clearing weather: the track is overcast, the fill is night sky, the head is sun.
Clearing inbox64%
9a · Progress bar
Connect
2 Choose focus
3 Clear sky
9b · Stepper
Drafting your morning…
9c · Spinner
9d · Skeleton
18

Data display

Rows breathe. Unread is a spark of sun; selection is a wash of sky.
CW The Corporate WorkerBoard deck cleared — three follow-ups drafted for Monday. 8:12 AM
NO The Night OwlMoved your late tasks into tomorrow's fresh block. 1:04 AM
GD The GardenerWatering reminder set for Saturday morning. Yesterday
10a · Inbox rows — unread / selected / read
2.4 hRECLAIMED / WEEK
38DRAFTS CLEARED
97%ON-TIME REPLIES
10b · Stat blocks
CHARACTERSTATUSLAST SEEN
The Corporate WorkerConfirmed2h ago
The GardenerAwaiting reply1d ago
The Night OwlFocus timenow
10c · Table
Nothing needs you right now. Your sky is clear until 3:00 PM. Plan something good
10d · Empty state
19

Typography & voice

Serif carries feeling; sans does the work. Never swap their jobs.
DISPLAY · SERIF 600 · 42A clear sky, on schedule
HEADLINE · SERIF 600 · 26Make room for the good parts
TITLE · SERIF 600 · 19.5Your afternoon, protected
BODY · SANS 400 · 14/1.6Drafts wait quietly until you are ready. Nothing pings, nothing piles up, and the thread that matters is always on top.
LABEL · SANS 600 · 13.5Get started
CAPTION · SANS 600 · 11 · +0.18EMTHE CORPORATE WORKER
Voice: weather words for system states — clearing, clouding up, all clear. Calm, concrete, second person. No urgency theater.
11a · Scale & voice
20

Iconography

24-grid, 1.6 stroke, rounded caps. Clouds are shapes; everything else is line.
cloud
sun
mail
send
calendar
clock
lock
bell
check
search
moon
spark
12a · Core set
21

Brand board

Identity locked — M2 Break of Sun · W1 Editorial · A3 golden hour · “Your future is built in the moments you choose to show up.”
LOCKED IDENTITYM2 · W1 · A3
M2Break of Sun✓ PICKED
Optimism peeking through — pairs with the sunlit CTA.
{{ appName }}
W1Editorial✓ PICKED
Warm serif — matches display type.
A3Golden hour, day sky✓ PICKED
LOCKED — SLOGANlocked
Your future is built in the moments you choose to show up.✓ PICKED
LOCKUP PREVIEW
{{ appName }} Your future is built in the moments you choose to show up. Locked identity: M2 · W1 · A3 on day sky · show-up slogan — complete
22

Disclosure

One thing open at a time — questions breathe, answers stay short.
What do the clouds stand for?
Clouds are potential — the height you haven't used yet. Light is direction: where you choose to aim it. Every component in this kit points the same way.
How do character renders drop in?
Can I remix the locked brand layers?
14a · Accordion — open / closed
Advanced settings
14b · Collapsible row
23

Pickers & sliders

Controls for amounts and moments — the sun is always the handle.
Cloud density60%
Quiet hours10 PM – 7 AM
15a · Sliders — single / range
− 2 +
15b · Stepper
3 of 5 suns
15c · Rating
‹September 2026›
SMTWTFS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
15d · Date picker — selected / event dots
Drop character art PNG with transparency · up to 20 MB
15e · Dropzone pattern
24

App shell & mobile

Sidebar for the desk, tab bar for the pocket, drawer for details.
{{ appName }}
Today
Inbox12
Characters
Plans
Private vault
CWThe Corporate WorkerPro cast
16a · Sidebar
Thread details×
Awaiting reply
CWThe Corporate Worker
Opened Tuesday · 3 messages · waiting on the vendor quote before Friday's plan locks.
Protect an hour
16b · Drawer
Today Inbox Plan You
16c · Mobile tab bar
25

Charts

Data in the same weather — navy for fact, gold for the bright spot.
Hours reclaimed · this week
MTWTFSS
17a · Bars — gold marks the peak
Focus trend+12%
17b · Sparkline
64%
Cleared Remaining
17c · Donut
26

Page blocks

Marketing surfaces assembled from the kit — nothing new, just composed.
Clear $0forever 3 clouds a day Core characters Mail + plan basics Start free
ClearerMOST LIGHT $8/ month Unlimited clouds Full cast + scenes Protected focus hours Go Clearer
18a · Pricing pair
“I stopped bracing for my inbox. Now it's just sky.” CWThe Corporate WorkerBeta cast · six months in
18b · Testimonial
Aim for the light. Your clouds are ready to work. Start building with the kit. Start building
18c · CTA band
{{ appName }} Your future is built in the moments you choose to show up.
© 2026 {{ appName }}Made under a clear sky
18d · Page footer