Twinkle AI Labs

TWINKLE AI LABS · DESIGN SYSTEM

Aurora
Ledger.

Small, consistent standards
that make good tools feel right.

Color, type, space and motion.
Connecting every Twinkle AI Labs product.

Explore colors Design principles
Aurora Ledger0102 / 02
AaPretendard
Design for light and numbers8 pt
Balanced spacing
MIST · The colors of a clear morningDUSK · The colors of a quiet night

Switch the site theme to move between Mist and Dusk.

Color modes
2
Token groups
7
Base grid
8pt
Principles
6

Identity

Design for light and numbers

Aurora Ledger began with our first product in August 2026. Its name reflects two qualities we want in every screen.

  • Aurora

    Light that guides in the dark

    Deep and bright violet define our identity, guiding attention to useful information and the next action.

  • Ledger

    A clear record of complex values

    Our first tool calculated investments. We still show complete numbers, put results first and explain changes with words and symbols as well as color.

The system is called Aurora Ledger. In product code, the Twinkle* prefix connects the brand to its implementation.

Foundation

Choose colors by role

colors

Assign roles instead of raw colors. Each role adapts to light and dark modes, preserving contrast and identity. Vivid violet guides the next action.

Color modes · Mist

Backgrounds and surfaces

  • bg#F8F6FC
  • surface#FFFFFF
  • sunken#F5F4F8
  • lifted#FFFFFF
  • key#FFFFFF
  • divider#EAE4F0

Typography

  • text#21182D
  • textSub#71687D
  • textFaint#A79EAF

Brand

  • primary#7040D9
  • accent#7040D9 · text
  • primarySoft#EEE7FC
  • gradient→ #8550E4

States and emphasis

  • danger#B42318Irreversible actions
  • warm#D92D20Warm emphasis
  • cool#2763C4Cool emphasis

Effects

  • glow · primary 20%
  • shadow · deep violet
  • scrim · 52%
  • outlineLifted

Color modes · Dusk

Backgrounds and surfaces

  • bg#110D19
  • surface#1B1526
  • sunken#251D32
  • lifted#2C233A
  • key#20182C
  • divider#352A42

Typography

  • text#FAF7FF
  • textSub#AEA3BA
  • textFaint#746A80

Brand

  • primary#986CF4
  • accent#B79AFF · text
  • primarySoftaccent · 12%
  • gradient→ #8550E4

States and emphasis

  • danger#FF9B91Irreversible actions
  • warm#FF9B91Warm emphasis
  • cool#8DB9FFCool emphasis

Effects

  • glow · accent 14%
  • shadow · black
  • scrim · 62%
  • outlineLifted · none
  • Backgrounds and surfaces — Mist adds a violet warmth to light surfaces. Dusk uses its own brightness and contrast for night, rather than inverting Mist.
  • Brand — Use primary for filled buttons and accent for text, icons and borders. Separate colors provide the contrast each needs in dark mode.
  • States and emphasis — Use danger for risky actions and warm/cool to distinguish information. Explain meanings with text and icons. Tinted backgrounds use 8% in light mode and 12% in dark mode.

Foundation

Six levels of emphasis

alpha

Six opacity levels control hierarchy and depth, keeping the same emphasis consistent across products.

  • strong.88Subdued body text
  • soft.70Secondary information
  • half.50Inner dividers
  • ring.35Emphasis borders
  • tint.20Soft surfaces and handles
  • wash.08Lightest surface · dark .12

Foundation

An 8pt rhythm

spacing

Use multiples of 8 for spacing. Reserve 2, 4 and 6px for alignment and fine adjustments.

  1. tight2
  2. s04
  3. s0h6
  4. s18
  5. s1h12
  6. s216
  7. s2h20
  8. s324
  9. s432
  10. s540
  11. s648

Foundation

Standards for size and shape

iconSize · elevation · shapes · controlSize · stroke

Icons

  • xs12
  • sm16
  • md20
  • lg26

Elevation

  • raised4Standard cards
  • floating10Hover and floating elements
  • drawer20Drawers and bottom sheets

Shapes

  • small11Input fields
  • medium14Inner panels and keys
  • large18Standard cards
  • extraLarge24Sheets and dialogs
  • drawer20Keypad drawer
  • pill999Badges and pill buttons

Controls

  • rowHeight48Default list row height
  • primaryButtonHeight48Primary button height
  • keypadKeyHeight52Number key height
  • keypadGap8Space between keys

Strokes

  • hair1Standard dividers
  • ring1.5Focus and selection

Interaction

Quick, natural motion

motion

Motion starts with purpose. Use gentle deceleration for entering and moving elements, and brief acceleration for exits.

Hover or focus the card to compare three durations.

  • fast150ms
  • base250ms
  • slow350ms

Hover or focus the card to compare entry and exit curves.

  • easecubic-bezier(.25, 1, .5, 1) · Entering or moving elements
  • exitcubic-bezier(.4, 0, 1, 1) · Elements leaving quickly

Foundation

Clear numbers and readable text

typography · Pretendard

Fifteen Pretendard roles cover numbers, headings, body text and labels. Large type presents results; small type adds context. Use defined sizes and weights, and keep Korean words intact.

  • A little light in your daydisplayLarge40 · 700 · 1.25 · -0.03em · Main message
  • 12 new entriesdisplayMedium36 · 700 · 1.25 · -0.03em · Key result
  • This week’s changesdisplaySmall32 · 700 · 1.25 · -0.03em · Summary heading
  • Ready to start a project?headlineLarge28 · 700 · 1.25 · -0.03em · Page title
  • Recent activityheadlineMedium24 · 700 · 1.25 · -0.02em · Section heading
  • August 24, 2026headlineSmall24 · 500 · 1.25 · -0.02em · Secondary heading
  • A new ideatitleLarge20 · 700 · 1.25 · -0.02em · Card title
  • Design review completetitleMedium16 · 600 · 1.35 · -0.01em · Item title
  • Today at 3 pmtitleSmall14 · 600 · 1.35 · -0.01em · Small heading
  • Find what you need and focus longer on what matters.bodyLarge16 · 400 · 1.65 · Emphasized body text
  • Changes sync automatically across your devices.bodyMedium14 · 400 · 1.65 · Default body text
  • Last saved 2 minutes agobodySmall12 · 400 · 1.35 · Help and descriptions
  • ContinuelabelLarge14 · 600 · 1.35 · -0.01em · Buttons and tabs
  • In progress · 8labelMedium12 · 500 · 1.35 · Status and metadata
  • NEWlabelSmall11 · 500 · 1.35 · Badges and captions

Principles

Six principles for clear screens

  • Focus strong effects on one primary action. Use one gradient per screen.
  • Explain states and changes with text and icons, as well as color.
  • Reserve danger colors for irreversible actions. Avoid alarming people over reversible choices.
  • Use spacing and alignment to show relationships. Simple structures are easier to read.
  • Use the largest text for the answer people need. Make results easier to find than inputs.
  • Show amounts and key numbers in full. If space is tight, use a smaller defined type size.

History

Record decisions and lessons

  1. 2026-08-09The first screen

    A violet investment calculator mockup became Aurora Ledger. Clear, complete numbers were our starting point.

  2. Early experimentsBring identity to neutrals

    Plain gray felt clean but anonymous. A hint of deep violet in every neutral restored the brand’s character.

  3. Early experimentsRestore meaningful colors

    All-violet highlights made financial changes hard to read. We restored red for gains and blue for losses, following Korean market conventions.

  4. Early experimentsFocus on action

    We moved gradients from large numbers to primary buttons, helping people find their next action.

  5. 2026-08-18A shared design language

    We finalized color and contrast standards and applied them to the first product. A single theme became a system for every product.

  6. 2026-08-22Complete the token system

    Opacity, spacing, sizes, elevation, shapes and motion joined colors in a shared vocabulary for design decisions.

  7. 2026-08-23Publish the principles

    We documented the reasons behind decisions and how to apply them, keeping judgment consistent as products grow.

  8. 2026-09-25Broaden the accent colors

    Red and blue became warm and cool. The colors remain, but neutral names let different products assign their own meanings.